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: spinner-border .75s linear infinite;
  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: spinner-grow .75s linear infinite;
  51 }
  52
  53 .spinner-grow-sm {
  54   width: $spinner-width-sm;
  55   height: $spinner-height-sm;
  56 }