packages/styles/scss/specifics/_placeholder-loading.scss

   1 /*
   2  * Shared for placeholder loading
   3  */
   4 @keyframes anime-loading-item {
   5         from {
   6                 opacity: 0.05;
   7         }
   8
   9         to {
  10                 opacity: 0.15;
  11         }
  12 }
  13
  14 %item-loading-pseudo {
  15         content: '\00a0';
  16         display: inline-block;
  17         border-radius: var(--border-radius-sm);
  18         background-color: currentcolor;
  19         line-height: 1.2;
  20         opacity: 0;
  21 }
  22
  23 %appearing-container {
  24         animation: anime-item-fade-in 0.5s easing(ease-out-quint);
  25 }
  26
  27 %placeholder-loading {
  28         animation: anime-loading-item 0.5s calc(var(--index, 0) * 20ms) easing(ease-out-sine) infinite alternate both;
  29 }
  30
  31 @keyframes anime-item-fade-in {
  32         from {
  33                 opacity: 0;
  34         }
  35
  36         to {
  37                 opacity: 1;
  38         }
  39 }