feat(expressive-loader): new module (#2260)

eBay · Mar 13, 2024 · 7607f6d · 7607f6d
1 parent 71cb87d
commit 7607f6d
Show file tree

Hide file tree

Showing 11 changed files with 1,214 additions and 2 deletions.
diff --git a/.changeset/grumpy-emus-jump.md b/.changeset/grumpy-emus-jump.md
@@ -0,0 +1,5 @@
+---
+"@ebay/skin": minor
+---
+
+feat(expressive-loader): new module
diff --git a/dist/expressive-loader/expressive-loader.css b/dist/expressive-loader/expressive-loader.css
@@ -0,0 +1,275 @@
+:root {
+  --expressive-loader-color-1: #e53238;
+  --expressive-loader-color-2: #0064d2;
+  --expressive-loader-color-3: #f5af02;
+  --expressive-loader-color-4: #86b817;
+  --expressive-loader-line-border-radius: 2px;
+  --expressive-loader-line-count: 12;
+  --expressive-loader-line-gap: var(--spacing-50);
+  --expressive-loader-line-height: 6px;
+  --expressive-loader-line-scale-duration: 3s;
+  --expressive-loader-line-scroll-duration: 20s;
+  /* Each line has a final width of 10% - 40% of the lines container.
+       In each set of four lines, the widths add up to 100%.
+       These widths are defined in CSS variables so they can more 
+       easily be randomized in Javascript, if desired. */
+  --expressive-loader-line-width-a1: 25%;
+  --expressive-loader-line-width-a2: 15%;
+  --expressive-loader-line-width-a3: 40%;
+  --expressive-loader-line-width-a4: 20%;
+  --expressive-loader-line-width-b1: 17%;
+  --expressive-loader-line-width-b2: 21%;
+  --expressive-loader-line-width-b3: 30%;
+  --expressive-loader-line-width-b4: 32%;
+  --expressive-loader-line-width-c1: 39%;
+  --expressive-loader-line-width-c2: 29%;
+  --expressive-loader-line-width-c3: 20%;
+  --expressive-loader-line-width-c4: 12%;
+  --expressive-loader-message-animatein-duration: 833ms;
+  --expressive-loader-message-animateout-duration: 400ms;
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --expressive-loader-color-1: #f0343b;
+    --expressive-loader-color-2: #0078fc;
+    --expressive-loader-color-3: #e8a502;
+    --expressive-loader-color-4: #86b817;
+  }
+}
+.expressive-loader {
+  align-items: stretch;
+  display: grid;
+  grid-template-columns: 1fr;
+  justify-content: end;
+  margin: 0 auto;
+  max-width: 375px;
+  row-gap: var(--spacing-300);
+  width: 100%;
+}
+.expressive-loader--loaded {
+  display: none;
+}
+.expressive-loader__messages {
+  color: var(--color-foreground-primary);
+  font-size: var(--font-size-large-1);
+  font-weight: var(--font-weight-regular);
+  line-height: calc(var(--spacing-50) + var(--spacing-300));
+  margin: 0 var(--spacing-200);
+  min-height: 3rem;
+  position: relative;
+  text-align: center;
+}
+.expressive-loader__messages--medium {
+  font-size: var(--font-size-medium);
+  font-weight: var(--font-weight-bold);
+  line-height: var(--spacing-300);
+}
+.expressive-loader__message {
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  right: 0;
+}
+.expressive-loader__message[role="status"] {
+  opacity: 1;
+}
+.expressive-loader__message[aria-hidden="true"] {
+  opacity: 0;
+}
+.expressive-loader__message--in {
+  animation: expressive-loader-message-animatein var(--expressive-loader-message-animatein-duration) cubic-bezier(0.3, 0, 0, 1) both;
+}
+.expressive-loader__message--out {
+  animation: expressive-loader-message-animateout var(--expressive-loader-message-animateout-duration) cubic-bezier(0.3, 0, 0, 1) both;
+}
+.expressive-loader__progress[role="progressbar"] {
+  border-radius: var(--expressive-loader-line-border-radius);
+  margin: 0 var(--spacing-200);
+  overflow: hidden;
+}
+.expressive-loader__lines {
+  display: flex;
+  overflow: visible;
+  width: calc(100% - (3 * var(--expressive-loader-line-gap)));
+}
+.expressive-loader__line {
+  /* Default animation behavior: Lines scroll and resize.
+       Animate line's width from 0% to its pre-defined width.
+       Simultaneously cycle the line's order in its flex container
+       to push its siblings forward and achieve an infinite loop. 
+
+       Note that Safari < 14 does not support flex order animations.
+       In these browsers, the lines do not appear to infinitely
+       scroll. Instead, they scale up, reset their size, and repeat. */
+  animation: expressive-loader-line-reorder var(--expressive-loader-line-scale-duration) steps(var(--expressive-loader-line-count)) infinite, expressive-loader-line-scale-width var(--expressive-loader-line-scale-duration) infinite;
+  border-radius: var(--expressive-loader-line-border-radius);
+  display: inline-block;
+  flex-shrink: 0;
+  height: var(--expressive-loader-line-height);
+  line-height: 0;
+  order: 1;
+}
+.expressive-loader__line:nth-child(4n + 1) {
+  background-color: var(--expressive-loader-color-4);
+}
+.expressive-loader__line:nth-child(4n + 2) {
+  background-color: var(--expressive-loader-color-3);
+}
+.expressive-loader__line:nth-child(4n + 3) {
+  background-color: var(--expressive-loader-color-2);
+}
+.expressive-loader__line:nth-child(4n + 4) {
+  background-color: var(--expressive-loader-color-1);
+}
+.expressive-loader__line:nth-child(1) {
+  animation-delay: calc(-1 * (var(--expressive-loader-line-scale-duration) - var(--expressive-loader-line-scale-duration) / var(--expressive-loader-line-count)));
+  width: var(--expressive-loader-line-width-a1);
+}
+.expressive-loader__line:nth-child(2) {
+  animation-delay: calc(-1 * (var(--expressive-loader-line-scale-duration) - ((var(--expressive-loader-line-scale-duration) / var(--expressive-loader-line-count)) * 2)));
+  width: var(--expressive-loader-line-width-a2);
+}
+.expressive-loader__line:nth-child(3) {
+  animation-delay: calc(-1 * (var(--expressive-loader-line-scale-duration) - ((var(--expressive-loader-line-scale-duration) / var(--expressive-loader-line-count)) * 3)));
+  width: var(--expressive-loader-line-width-a3);
+}
+.expressive-loader__line:nth-child(4) {
+  animation-delay: calc(-1 * (var(--expressive-loader-line-scale-duration) - ((var(--expressive-loader-line-scale-duration) / var(--expressive-loader-line-count)) * 4)));
+  width: var(--expressive-loader-line-width-a4);
+}
+.expressive-loader__line:nth-child(5) {
+  animation-delay: calc(-1 * (var(--expressive-loader-line-scale-duration) - ((var(--expressive-loader-line-scale-duration) / var(--expressive-loader-line-count)) * 5)));
+  width: var(--expressive-loader-line-width-b1);
+}
+.expressive-loader__line:nth-child(6) {
+  animation-delay: calc(-1 * (var(--expressive-loader-line-scale-duration) - ((var(--expressive-loader-line-scale-duration) / var(--expressive-loader-line-count)) * 6)));
+  width: var(--expressive-loader-line-width-b2);
+}
+.expressive-loader__line:nth-child(7) {
+  animation-delay: calc(-1 * (var(--expressive-loader-line-scale-duration) - ((var(--expressive-loader-line-scale-duration) / var(--expressive-loader-line-count)) * 7)));
+  width: var(--expressive-loader-line-width-b3);
+}
+.expressive-loader__line:nth-child(8) {
+  animation-delay: calc(-1 * (var(--expressive-loader-line-scale-duration) - ((var(--expressive-loader-line-scale-duration) / var(--expressive-loader-line-count)) * 8)));
+  width: var(--expressive-loader-line-width-b4);
+}
+.expressive-loader__line:nth-child(9) {
+  animation-delay: calc(-1 * (var(--expressive-loader-line-scale-duration) - ((var(--expressive-loader-line-scale-duration) / var(--expressive-loader-line-count)) * 9)));
+  width: var(--expressive-loader-line-width-c1);
+}
+.expressive-loader__line:nth-child(10) {
+  animation-delay: calc(-1 * (var(--expressive-loader-line-scale-duration) - ((var(--expressive-loader-line-scale-duration) / var(--expressive-loader-line-count)) * 10)));
+  width: var(--expressive-loader-line-width-c2);
+}
+.expressive-loader__line:nth-child(11) {
+  animation-delay: calc(-1 * (var(--expressive-loader-line-scale-duration) - ((var(--expressive-loader-line-scale-duration) / var(--expressive-loader-line-count)) * 11)));
+  width: var(--expressive-loader-line-width-c3);
+}
+.expressive-loader__line:nth-child(12) {
+  animation-delay: calc(-1 * (var(--expressive-loader-line-scale-duration) - ((var(--expressive-loader-line-scale-duration) / var(--expressive-loader-line-count)) * 12)));
+  width: var(--expressive-loader-line-width-c4);
+}
+/* With reduced motion, there are no animated transitions
+   between messages and the lines scroll but do not resize. */
+@media (prefers-reduced-motion) {
+  .expressive-loader__message--in,
+  .expressive-loader__message--out {
+    animation: none;
+  }
+  .expressive-loader__message[aria-hidden="true"] {
+    display: none;
+  }
+  .expressive-loader__messages:not(.expressive-loader__messages--medium) .expressive-loader__message--initial[role="status"] {
+    animation: expressive-loader-message-fadein var(--expressive-loader-message-animatein-duration) cubic-bezier(0.3, 0, 0, 1) both;
+  }
+  .expressive-loader__lines {
+    animation: expressive-loader-reduced-motion-line-scroll var(--expressive-loader-line-scroll-duration) linear infinite;
+    overflow: visible;
+  }
+  .expressive-loader__line {
+    animation: none;
+    animation-delay: none;
+    margin-right: var(--expressive-loader-line-gap);
+  }
+  .expressive-loader__line:nth-child(4n + 1) {
+    background-color: var(--expressive-loader-color-1);
+  }
+  .expressive-loader__line:nth-child(4n + 2) {
+    background-color: var(--expressive-loader-color-2);
+  }
+  .expressive-loader__line:nth-child(4n + 3) {
+    background-color: var(--expressive-loader-color-3);
+  }
+  .expressive-loader__line:nth-child(4n + 4) {
+    background-color: var(--expressive-loader-color-4);
+  }
+  .expressive-loader__line:nth-child(9) {
+    width: var(--expressive-loader-line-width-a1);
+  }
+  .expressive-loader__line:nth-child(10) {
+    width: var(--expressive-loader-line-width-a2);
+  }
+  .expressive-loader__line:nth-child(11) {
+    width: var(--expressive-loader-line-width-a3);
+  }
+  .expressive-loader__line:nth-child(12) {
+    width: var(--expressive-loader-line-width-a4);
+  }
+}
+@keyframes expressive-loader-message-animateout {
+  0% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(calc(var(--font-size-24) * -1));
+  }
+}
+@keyframes expressive-loader-message-animatein {
+  0% {
+    opacity: 0;
+    transform: translateY(var(--font-size-24));
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes expressive-loader-message-fadein {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes expressive-loader-line-reorder {
+  0% {
+    order: 0;
+  }
+  100% {
+    order: var(--expressive-loader-line-count);
+  }
+}
+@keyframes expressive-loader-line-scale-width {
+  0% {
+    margin-right: 0;
+    width: 0;
+  }
+  12.5% {
+    margin-right: var(--expressive-loader-line-gap);
+  }
+  50%,
+  100% {
+    margin-right: var(--expressive-loader-line-gap);
+  }
+}
+@keyframes expressive-loader-reduced-motion-line-scroll {
+  0% {
+    transform: translateX(calc(-200% - 8 * var(--expressive-loader-line-gap)));
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
diff --git a/docs/_data/modules.yaml b/docs/_data/modules.yaml
@@ -17,6 +17,7 @@ list:
   - drawer-dialog
   - fullscreen-dialog
   - eek
+  - expressive-loader
   - field
   - filter-button
   - filter-menu