[Summary view] [Print] [Text view]

   1  .placeholder {
   2    display: inline-block;
   3    min-height: 1em;
   4    vertical-align: middle;
   5    cursor: wait;
   6    background-color: currentColor;
   7    opacity: $placeholder-opacity-max;
   8  
   9    &.btn::before {
  10      display: inline-block;
  11      content: "";
  12    }
  13  }
  14  
  15  // Sizing
  16  .placeholder-xs {
  17    min-height: .6em;
  18  }
  19  
  20  .placeholder-sm {
  21    min-height: .8em;
  22  }
  23  
  24  .placeholder-lg {
  25    min-height: 1.2em;
  26  }
  27  
  28  // Animation
  29  .placeholder-glow {
  30    .placeholder {
  31      animation: placeholder-glow 2s ease-in-out infinite;
  32    }
  33  }
  34  
  35  @keyframes placeholder-glow {
  36    50% {
  37      opacity: $placeholder-opacity-min;
  38    }
  39  }
  40  
  41  .placeholder-wave {
  42    mask-image: linear-gradient(130deg, $black 55%, rgba(0, 0, 0, (1 - $placeholder-opacity-min)) 75%, $black 95%);
  43    mask-size: 200% 100%;
  44    animation: placeholder-wave 2s linear infinite;
  45  }
  46  
  47  @keyframes placeholder-wave {
  48    100% {
  49      mask-position: -200% 0%;
  50    }
  51  }