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

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