Styling intro screen and adding demo images.

2025-11-14 09:39:15 +00:00 · 2018-10-12 14:11:10 +01:00
parent a43ea761f5
commit 568b9e9459
24 changed files with 550 additions and 50 deletions
--- a/src/components/custom-els/LoadingSpinner/styles.css
+++ b/src/components/custom-els/LoadingSpinner/styles.css
@@ -0,0 +1,124 @@
+@keyframes spinner-left-spin {
+  from { transform: rotate(130deg); }
+  50% { transform: rotate(-5deg); }
+  to { transform: rotate(130deg); }
+}
+
+@keyframes spinner-right-spin {
+  from { transform: rotate(-130deg); }
+  50% { transform: rotate(5deg); }
+  to { transform: rotate(-130deg); }
+}
+
+@keyframes spinner-fade-out {
+  to { opacity: 0; }
+}
+
+@keyframes spinner-container-rotate {
+  to { transform: rotate(360deg) }
+}
+
+@keyframes spinner-fill-unfill-rotate {
+  12.5% { transform: rotate(135deg);  } /* 0.5 * ARCSIZE */
+  25%   { transform: rotate(270deg);  } /* 1   * ARCSIZE */
+  37.5% { transform: rotate(405deg);  } /* 1.5 * ARCSIZE */
+  50%   { transform: rotate(540deg);  } /* 2   * ARCSIZE */
+  62.5% { transform: rotate(675deg);  } /* 2.5 * ARCSIZE */
+  75%   { transform: rotate(810deg);  } /* 3   * ARCSIZE */
+  87.5% { transform: rotate(945deg);  } /* 3.5 * ARCSIZE */
+  to    { transform: rotate(1080deg); } /* 4   * ARCSIZE */
+}
+
+loading-spinner {
+  --size: 28px;
+  --color: #4285f4;
+  --stroke-width: 3px;
+  --delay: 300ms;
+
+  pointer-events: none;
+  display: inline-block;
+  position: relative;
+  width: var(--size);
+  height: var(--size);
+  border-color: var(--color);
+}
+
+loading-spinner .spinner-circle {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  box-sizing: border-box;
+  height: 100%;
+  width: 200%;
+  border-width: var(--stroke-width);
+  border-style: solid;
+  border-color: inherit;
+  border-bottom-color: transparent !important;
+  border-radius: 50%;
+}
+
+/*
+  Patch the gap that appear between the two adjacent div.circle-clipper while the
+  spinner is rotating (appears on Chrome 38, Safari 7.1, and IE 11).
+*/
+loading-spinner .spinner-gap-patch {
+  position: absolute;
+  box-sizing: border-box;
+  top: 0;
+  left: 45%;
+  width: 10%;
+  height: 100%;
+  overflow: hidden;
+  border-color: inherit;
+}
+
+loading-spinner .spinner-gap-patch .spinner-circle {
+  width: 1000%;
+  left: -450%;
+}
+
+loading-spinner .spinner-circle-clipper {
+  display: inline-block;
+  position: relative;
+  width: 50%;
+  height: 100%;
+  overflow: hidden;
+  border-color: inherit;
+}
+
+loading-spinner .spinner-left .spinner-circle {
+  border-right-color: transparent !important;
+  transform: rotate(129deg);
+  animation: spinner-left-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
+}
+
+loading-spinner .spinner-right .spinner-circle {
+  left: -100%;
+  border-left-color: transparent !important;
+  transform: rotate(-129deg);
+  animation: spinner-right-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
+}
+
+loading-spinner.spinner-fadeout {
+  animation: spinner-fade-out 400ms cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
+}
+
+loading-spinner .spinner-container {
+  width: 100%;
+  height: 100%;
+  border-color: inherit;
+
+  /* duration: 360 * ARCTIME / (ARCSTARTROT + (360-ARCSIZE)) */
+  animation: spinner-container-rotate 1568ms linear infinite;
+}
+
+loading-spinner .spinner-layer {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  border-color: inherit;
+  /* durations: 4 * ARCTIME */
+  animation: spinner-fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
+}