git.roojs.org Git - roojs1/blob - scss/bootstrap/_spinners.scss

   1 //
   2 // Rotating border
   3 //
   4
   5 @keyframes spinner-border {
   6   to { transform: rotate(360deg); }
   7 }
   8
   9 .spinner-border {
  10   display: inline-block;
  11   width: $spinner-width;
  12   height: $spinner-height;
  13   vertical-align: text-bottom;
  14   border: $spinner-border-width solid currentColor;
  15   border-right-color: transparent;
  16   // stylelint-disable-next-line property-disallowed-list
  17   border-radius: 50%;
  18   animation: .75s linear infinite spinner-border;
  19 }
  20
  21 .spinner-border-sm {
  22   width: $spinner-width-sm;
  23   height: $spinner-height-sm;
  24   border-width: $spinner-border-width-sm;
  25 }
  26
  27 //
  28 // Growing circle
  29 //
  30
  31 @keyframes spinner-grow {
  32   0% {
  33     transform: scale(0);
  34   }
  35   50% {
  36     opacity: 1;
  37     transform: none;
  38   }
  39 }
  40
  41 .spinner-grow {
  42   display: inline-block;
  43   width: $spinner-width;
  44   height: $spinner-height;
  45   vertical-align: text-bottom;
  46   background-color: currentColor;
  47   // stylelint-disable-next-line property-disallowed-list
  48   border-radius: 50%;
  49   opacity: 0;
  50   animation: .75s linear infinite spinner-grow;
  51 }
  52
  53 .spinner-grow-sm {
  54   width: $spinner-width-sm;
  55   height: $spinner-height-sm;
  56 }
  57
  58 @if $enable-prefers-reduced-motion-media-query {
  59   @media (prefers-reduced-motion: reduce) {
  60     .spinner-border,
  61     .spinner-grow {
  62       animation-duration: 1.5s;
  63     }
  64   }
  65 }