_spinners.scss 1.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  1. //
  2. // Rotating border
  3. //
  4. @keyframes spinner-border {
  5. to {
  6. transform: rotate(360deg);
  7. }
  8. }
  9. .spinner-border {
  10. display: inline-block;
  11. width: $spinner-width;
  12. height: $spinner-height;
  13. vertical-align: text-bottom;
  14. border: $spinner-border-width solid currentColor;
  15. border-right-color: transparent;
  16. // stylelint-disable-next-line property-blacklist
  17. border-radius: 50%;
  18. animation: spinner-border 0.75s linear infinite;
  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. @keyframes spinner-grow {
  29. 0% {
  30. transform: scale(0);
  31. }
  32. 50% {
  33. opacity: 1;
  34. }
  35. }
  36. .spinner-grow {
  37. display: inline-block;
  38. width: $spinner-width;
  39. height: $spinner-height;
  40. vertical-align: text-bottom;
  41. background-color: currentColor;
  42. // stylelint-disable-next-line property-blacklist
  43. border-radius: 50%;
  44. opacity: 0;
  45. animation: spinner-grow 0.75s linear infinite;
  46. }
  47. .spinner-grow-sm {
  48. width: $spinner-width-sm;
  49. height: $spinner-height-sm;
  50. }