You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
85 lines
2.4 KiB
85 lines
2.4 KiB
// |
|
// Rotating border |
|
// |
|
|
|
.spinner-grow, |
|
.spinner-border { |
|
display: inline-block; |
|
width: var(--#{$prefix}spinner-width); |
|
height: var(--#{$prefix}spinner-height); |
|
vertical-align: var(--#{$prefix}spinner-vertical-align); |
|
// stylelint-disable-next-line property-disallowed-list |
|
border-radius: 50%; |
|
animation: var(--#{$prefix}spinner-animation-speed) linear infinite var(--#{$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 |
|
--#{$prefix}spinner-width: #{$spinner-width}; |
|
--#{$prefix}spinner-height: #{$spinner-height}; |
|
--#{$prefix}spinner-vertical-align: #{$spinner-vertical-align}; |
|
--#{$prefix}spinner-border-width: #{$spinner-border-width}; |
|
--#{$prefix}spinner-animation-speed: #{$spinner-animation-speed}; |
|
--#{$prefix}spinner-animation-name: spinner-border; |
|
// scss-docs-end spinner-border-css-vars |
|
|
|
border: var(--#{$prefix}spinner-border-width) solid currentcolor; |
|
border-right-color: transparent; |
|
} |
|
|
|
.spinner-border-sm { |
|
// scss-docs-start spinner-border-sm-css-vars |
|
--#{$prefix}spinner-width: #{$spinner-width-sm}; |
|
--#{$prefix}spinner-height: #{$spinner-height-sm}; |
|
--#{$prefix}spinner-border-width: #{$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 |
|
--#{$prefix}spinner-width: #{$spinner-width}; |
|
--#{$prefix}spinner-height: #{$spinner-height}; |
|
--#{$prefix}spinner-vertical-align: #{$spinner-vertical-align}; |
|
--#{$prefix}spinner-animation-speed: #{$spinner-animation-speed}; |
|
--#{$prefix}spinner-animation-name: spinner-grow; |
|
// scss-docs-end spinner-grow-css-vars |
|
|
|
background-color: currentcolor; |
|
opacity: 0; |
|
} |
|
|
|
.spinner-grow-sm { |
|
--#{$prefix}spinner-width: #{$spinner-width-sm}; |
|
--#{$prefix}spinner-height: #{$spinner-height-sm}; |
|
} |
|
|
|
@if $enable-reduced-motion { |
|
@media (prefers-reduced-motion: reduce) { |
|
.spinner-border, |
|
.spinner-grow { |
|
--#{$prefix}spinner-animation-speed: #{$spinner-animation-speed * 2}; |
|
} |
|
} |
|
}
|
|
|