scss/bootstrap/_spinners.scss

0001 //
0002 // Rotating border
0003 //
0004
0005 @keyframes spinner-border {
0006   to { transform: rotate(360deg) #{"/* rtl:ignore */"}; }
0007 }
0008
0009 .spinner-border {
0010   display: inline-block;
0011   width: $spinner-width;
0012   height: $spinner-height;
0013   vertical-align: text-bottom;
0014   border: $spinner-border-width solid currentColor;
0015   border-right-color: transparent;
0016   // stylelint-disable-next-line property-disallowed-list
0017   border-radius: 50%;
0018   animation: $spinner-animation-speed linear infinite spinner-border;
0019 }
0020
0021 .spinner-border-sm {
0022   width: $spinner-width-sm;
0023   height: $spinner-height-sm;
0024   border-width: $spinner-border-width-sm;
0025 }
0026
0027 //
0028 // Growing circle
0029 //
0030
0031 @keyframes spinner-grow {
0032   0% {
0033     transform: scale(0);
0034   }
0035   50% {
0036     opacity: 1;
0037     transform: none;
0038   }
0039 }
0040
0041 .spinner-grow {
0042   display: inline-block;
0043   width: $spinner-width;
0044   height: $spinner-height;
0045   vertical-align: text-bottom;
0046   background-color: currentColor;
0047   // stylelint-disable-next-line property-disallowed-list
0048   border-radius: 50%;
0049   opacity: 0;
0050   animation: $spinner-animation-speed linear infinite spinner-grow;
0051 }
0052
0053 .spinner-grow-sm {
0054   width: $spinner-width-sm;
0055   height: $spinner-height-sm;
0056 }
0057
0058 @if $enable-reduced-motion {
0059   @media (prefers-reduced-motion: reduce) {
0060     .spinner-border,
0061     .spinner-grow {
0062       animation-duration: $spinner-animation-speed * 2;
0063     }
0064   }
0065 }