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.

69 lines
1.5 KiB

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