_spinners.scss 2.4 KB

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