1234567891011121314151617181920212223242526272829303132333435363738394041424344 |
- .progress {
- align-items: center;
- display: flex;
- justify-content: center;
- margin-top: 3px;
- position: relative;
- text-align: center;
- }
- .progress__bg {
- stroke: #eee;
- stroke-width: 0.75em;
- }
- .progress__bar {
- stroke: #3b9dff;
- stroke-width: 0.75em;
- transition: stroke-dashoffset 300ms linear;
- }
- .progress__indefinite {
- stroke: #3b9dff;
- stroke-width: 0.75em;
- animation: 1s linear infinite spin;
- transform-origin: center;
- }
- @keyframes spin {
- from {
- transform: rotate(0deg);
- }
- to {
- transform: rotate(360deg);
- }
- }
- .progress__percent {
- font-family: 'Segoe UI', 'SF Pro Text', sans-serif;
- font-size: 43.2px;
- letter-spacing: -0.78px;
- line-height: 58px;
- user-select: none;
- }
|