_spinners.scss 1.2 KB

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