spinner.scss 712 B

12345678910111213141516171819202122232425262728293031323334353637383940414243
  1. @use 'mixins/mixins' as *;
  2. @include b(time-spinner) {
  3. width: 100%;
  4. white-space: nowrap;
  5. }
  6. @include b(spinner) {
  7. display: inline-block;
  8. vertical-align: middle;
  9. }
  10. @include b(spinner-inner) {
  11. animation: rotate 2s linear infinite;
  12. width: 50px;
  13. height: 50px;
  14. & .path {
  15. stroke: getCssVar('border-color', 'lighter');
  16. stroke-linecap: round;
  17. animation: dash 1.5s ease-in-out infinite;
  18. }
  19. }
  20. @keyframes rotate {
  21. 100% {
  22. transform: rotate(360deg);
  23. }
  24. }
  25. @keyframes dash {
  26. 0% {
  27. stroke-dasharray: 1, 150;
  28. stroke-dashoffset: 0;
  29. }
  30. 50% {
  31. stroke-dasharray: 90, 150;
  32. stroke-dashoffset: -35;
  33. }
  34. 100% {
  35. stroke-dasharray: 90, 150;
  36. stroke-dashoffset: -124;
  37. }
  38. }