2018-02-13 20:32:59 +01:00
|
|
|
.progress {
|
|
|
|
margin-top: 3px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.progress__bg {
|
|
|
|
stroke: #eee;
|
|
|
|
stroke-width: 0.75em;
|
|
|
|
}
|
|
|
|
|
|
|
|
.progress__bar {
|
|
|
|
stroke: #3b9dff;
|
|
|
|
stroke-width: 0.75em;
|
|
|
|
transition: stroke-dashoffset 300ms linear;
|
|
|
|
}
|
|
|
|
|
2018-02-21 22:59:06 +01:00
|
|
|
.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);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2018-02-13 20:32:59 +01:00
|
|
|
.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;
|
|
|
|
}
|