_spinners.less 938 B

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
  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. border-radius: 50%;
  15. animation: spinner-border 0.75s linear infinite;
  16. }
  17. .spinner-border-sm {
  18. width: @spinner-width-sm;
  19. height: @spinner-height-sm;
  20. border-width: @spinner-border-width-sm;
  21. }
  22. //
  23. // Growing circle
  24. //
  25. @keyframes spinner-grow {
  26. 0% {
  27. transform: scale(0);
  28. }
  29. 50% {
  30. opacity: 1;
  31. transform: none;
  32. }
  33. }
  34. .spinner-grow {
  35. display: inline-block;
  36. width: @spinner-width;
  37. height: @spinner-height;
  38. vertical-align: text-bottom;
  39. background-color: currentColor;
  40. border-radius: 50%;
  41. opacity: 0;
  42. animation: spinner-grow 0.75s linear infinite;
  43. }
  44. .spinner-grow-sm {
  45. width: @spinner-width-sm;
  46. height: @spinner-height-sm;
  47. }