@use "variables"; // // Rotating border // .spinner-grow, .spinner-border { display: inline-block; width: var(--#{variables.$prefix}spinner-width); height: var(--#{variables.$prefix}spinner-height); vertical-align: var(--#{variables.$prefix}spinner-vertical-align); // stylelint-disable-next-line property-disallowed-list border-radius: 50%; animation: var(--#{variables.$prefix}spinner-animation-speed) linear infinite var(--#{variables.$prefix}spinner-animation-name); } // scss-docs-start spinner-border-keyframes @keyframes spinner-border { to { transform: rotate(360deg) #{"/* rtl:ignore */"}; } } // scss-docs-end spinner-border-keyframes .spinner-border { // scss-docs-start spinner-border-css-vars --#{variables.$prefix}spinner-width: #{variables.$spinner-width}; --#{variables.$prefix}spinner-height: #{variables.$spinner-height}; --#{variables.$prefix}spinner-vertical-align: #{variables.$spinner-vertical-align}; --#{variables.$prefix}spinner-border-width: #{variables.$spinner-border-width}; --#{variables.$prefix}spinner-animation-speed: #{variables.$spinner-animation-speed}; --#{variables.$prefix}spinner-animation-name: spinner-border; // scss-docs-end spinner-border-css-vars border: var(--#{variables.$prefix}spinner-border-width) solid currentcolor; border-right-color: transparent; } .spinner-border-sm { // scss-docs-start spinner-border-sm-css-vars --#{variables.$prefix}spinner-width: #{variables.$spinner-width-sm}; --#{variables.$prefix}spinner-height: #{variables.$spinner-height-sm}; --#{variables.$prefix}spinner-border-width: #{variables.$spinner-border-width-sm}; // scss-docs-end spinner-border-sm-css-vars } // // Growing circle // // scss-docs-start spinner-grow-keyframes @keyframes spinner-grow { 0% { transform: scale(0); } 50% { opacity: 1; transform: none; } } // scss-docs-end spinner-grow-keyframes .spinner-grow { // scss-docs-start spinner-grow-css-vars --#{variables.$prefix}spinner-width: #{variables.$spinner-width}; --#{variables.$prefix}spinner-height: #{variables.$spinner-height}; --#{variables.$prefix}spinner-vertical-align: #{variables.$spinner-vertical-align}; --#{variables.$prefix}spinner-animation-speed: #{variables.$spinner-animation-speed}; --#{variables.$prefix}spinner-animation-name: spinner-grow; // scss-docs-end spinner-grow-css-vars background-color: currentcolor; opacity: 0; } .spinner-grow-sm { --#{variables.$prefix}spinner-width: #{variables.$spinner-width-sm}; --#{variables.$prefix}spinner-height: #{variables.$spinner-height-sm}; } @if variables.$enable-reduced-motion { @media (prefers-reduced-motion: reduce) { .spinner-border, .spinner-grow { --#{variables.$prefix}spinner-animation-speed: #{variables.$spinner-animation-speed * 2}; } } }