[Summary view] [Print] [Text view]

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