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   overflow: hidden;
  14   text-indent: -999em;
  15   vertical-align: text-bottom;
  16   border: $spinner-border-width solid currentColor;
  17   border-right-color: transparent;
  18   border-radius: 50%;
  19   animation: spinner-border .75s linear infinite;
  20 }
  21
  22 .spinner-border-sm {
  23   width: $spinner-width-sm;
  24   height: $spinner-height-sm;
  25   border-width: $spinner-border-width-sm;
  26 }
  27
  28 //
  29 // Growing circle
  30 //
  31
  32 @keyframes spinner-grow {
  33   0% {
  34     transform: scale(0);
  35   }
  36   50% {
  37     opacity: 1;
  38   }
  39 }
  40
  41 .spinner-grow {
  42   display: inline-block;
  43   width: $spinner-width;
  44   height: $spinner-height;
  45   overflow: hidden;
  46   text-indent: -999em;
  47   vertical-align: text-bottom;
  48   background-color: currentColor;
  49   border-radius: 50%;
  50   opacity: 0;
  51   animation: spinner-grow .75s linear infinite;
  52 }
  53
  54 .spinner-grow-sm {
  55   width: $spinner-width-sm;
  56   height: $spinner-height-sm;
  57 }