codecheck

1
// core
2
.p-progress-spinner {
3
    position: relative;
4
    margin: 0 auto;
5
    width: 100px;
6
    height: 100px;
7
    display: inline-block;
8
}
9

10
.p-progress-spinner::before {
11
    content: '';
12
    display: block;
13
    padding-top: 100%;
14
}
15

16
.p-progress-spinner-svg {
17
    height: 100%;
18
    transform-origin: center center;
19
    width: 100%;
20
    position: absolute;
21
    top: 0;
22
    bottom: 0;
23
    left: 0;
24
    right: 0;
25
    margin: auto;
26
}
27

28
// theme
29
.p-progress-spinner-svg {
30
    animation: p-progress-spinner-rotate 2s linear infinite;
31
}
32

33
.p-progress-spinner-circle {
34
    stroke-dasharray: 89, 200;
35
    stroke-dashoffset: 0;
36
    stroke: $progressSpinnerStrokeColor;
37
    animation: p-progress-spinner-dash 1.5s ease-in-out infinite, p-progress-spinner-color 6s ease-in-out infinite;
38
    stroke-linecap: round;
39
}
40

41
@keyframes p-progress-spinner-rotate {
42
    100% {
43
        transform: rotate(360deg);
44
    }
45
}
46

47
@keyframes p-progress-spinner-dash {
48
    0% {
49
        stroke-dasharray: 1, 200;
50
        stroke-dashoffset: 0;
51
    }
52
    50% {
53
        stroke-dasharray: 89, 200;
54
        stroke-dashoffset: -35px;
55
    }
56
    100% {
57
        stroke-dasharray: 89, 200;
58
        stroke-dashoffset: -124px;
59
    }
60
}
61

62
@keyframes p-progress-spinner-color {
63
    100%,
64
    0% {
65
        stroke: $progressSpinnerColorOne;
66
    }
67
    40% {
68
        stroke: $progressSpinnerColorTwo;
69
    }
70
    66% {
71
        stroke: $progressSpinnerColorThree;
72
    }
73
    80%,
74
    90% {
75
        stroke: $progressSpinnerColorFour;
76
    }
77
}