progress.css 722 B

1234567891011121314151617181920212223242526272829303132333435363738394041424344
  1. .progress {
  2. align-items: center;
  3. display: flex;
  4. justify-content: center;
  5. margin-top: 3px;
  6. position: relative;
  7. text-align: center;
  8. }
  9. .progress__bg {
  10. stroke: #eee;
  11. stroke-width: 0.75em;
  12. }
  13. .progress__bar {
  14. stroke: #3b9dff;
  15. stroke-width: 0.75em;
  16. transition: stroke-dashoffset 300ms linear;
  17. }
  18. .progress__indefinite {
  19. stroke: #3b9dff;
  20. stroke-width: 0.75em;
  21. animation: 1s linear infinite spin;
  22. transform-origin: center;
  23. }
  24. @keyframes spin {
  25. from {
  26. transform: rotate(0deg);
  27. }
  28. to {
  29. transform: rotate(360deg);
  30. }
  31. }
  32. .progress__percent {
  33. font-family: 'Segoe UI', 'SF Pro Text', sans-serif;
  34. font-size: 43.2px;
  35. letter-spacing: -0.78px;
  36. line-height: 58px;
  37. user-select: none;
  38. }