CSS100Day(22)-使用svg实现圆形进度条

1
<div class="frame">
2
    <div class="title">
3
        <div class="small">YOUR DAILY</div>
4
        PROGRESS
5
    </div>
6
    <div class="big-circle">
7
        <div class="text">
8
            2758
9
            <div class="small">kcal</div>
10
        </div>
11
        <svg>
12
            <circle class="bg" cx="57" cy="57" r="52"></circle>
13
            <circle class="progress" cx="57" cy="57" r="52"></circle>
14
        </svg>
15
    </div>
16
    <div class="small-circle-group">
17
        <div class="small-circle">
18
            <div class="text">
19
                8563
20
                <div class="small">steps</div>
21
            </div>
22
            <svg>
23
                <circle class="bg" cx="40" cy="40" r="37"></circle>
24
                <circle class="progress one" cx="40" cy="40" r="37"></circle>
25
            </svg>
26
        </div>
27
        <div class="small-circle">
28
            <div class="text">
29
                6,2
30
                <div class="small">km</div>
31
            </div>
32
            <svg>
33
                <circle class="bg" cx="40" cy="40" r="37"></circle>
34
                <circle class="progress two" cx="40" cy="40" r="37"></circle>
35
            </svg>
36
        </div>
37
    </div>
38
</div>

1
:root {
2
    --bg: #28404e;
3
    --stroke-bg: #1b2a33;
4
    --big-stroke: #27e1ae;
5
    --small-stroke: #5ce1ec;
6
}
7

8
.frame {
9
    width: 400px;
10
    height: 400px;
11
    box-shadow: 1px 2px 10px 0 rgba(0, 0, 0, 0.3);
12
    background: var(--bg);
13
    color: #fff;
14
    display: flex;
15
    flex-direction: column;
16
    align-items: center;
17
    padding-top: 50px;
18
    padding-bottom: 60px;
19
    box-sizing: border-box;
20
    overflow: hidden;
21
}
22

23
.title {
24
    font-weight: 700;
25
    font-size: 24px;
26
    text-transform: uppercase;
27
    text-align: center;
28
    line-height: 22px;
29

30
    .small {
31
        font-weight: 300;
32
        font-size: 16px;
33
    }
34
}
35

36
.big-circle {
37
    width: 114px;
38
    height: 114px;
39
    text-align: center;
40
    position: relative;
41
    margin: 30px auto 25px auto;
42

43
    .text {
44
        position: absolute;
45
        font-size: 24px;
46
        font-weight: 600;
47
        text-align: center;
48
        width: 100%;
49
        top: 37px;
50
        line-height: 22px;
51

52
        .small {
53
            font-size: 14px;
54
            font-weight: 300;
55
            color: #648192;
56
        }
57
    }
58

59
    svg {
60
        width: 114px;
61
        height: 114px;
62

63
        .bg {
64
            stroke: var(--stroke-bg);
65
            fill: none;
66
            stroke-width: 10px;
67
        }
68

69
        .progress {
70
            stroke: var(--big-stroke);
71
            stroke-linecap: round;
72
            fill: none;
73
            stroke-width: 10px;
74
            stroke-dasharray: calc(2 * 52 * 3.14px);
75
            stroke-dashoffset: 60px;
76
            transform-origin: 50% 50%;
77
            transform: rotate(-90deg);
78
            animation: big 1.5s ease-out;
79
        }
80
    }
81
}
82

83
.small-circle-group {
84
    margin: 0 auto;
85
    width: 400px;
86
    height: 80px;
87
    display: flex;
88
    justify-content: center;
89
    gap: 40px;
90

91
    .small-circle {
92
        width: 80px;
93
        height: 80px;
94
        position: relative;
95

96
        svg {
97
            width: 80px;
98
            height: 80px;
99
        }
100

101
        .bg {
102
            fill: none;
103
            stroke-width: 6px;
104
            stroke: #1b2a33;
105
        }
106

107
        .text {
108
            position: absolute;
109
            font-size: 17px;
110
            font-weight: 600;
111
            width: 100%;
112
            text-align: center;
113
            top: 26px;
114
            line-height: 16px;
115

116
            .small {
117
                font-size: 12px;
118
                color: #648192;
119
            }
120
        }
121

122
        .progress {
123
            fill: none;
124
            stroke-width: 6px;
125
            stroke-linecap: round;
126
            stroke: var(--small-stroke);
127
            stroke-dasharray: calc(2 * 37 * 3.14px);
128
            transform-origin: 50% 50%;
129
            transform: rotate(-90deg);
130

131
            &.one {
132
                stroke-dashoffset: 80px;
133
                animation: one 1.5s ease-out;
134
            }
135

136
            &.two {
137
                stroke-dashoffset: 140px;
138
                animation: two 1.5s ease-out;
139
            }
140
        }
141
    }
142
}
143

144
@keyframes big {
145
    from {
146
        stroke-dashoffset: calc(2 * 52 * 3.14px);
147
    }
148
    to {
149
        stroke-dashoffset: 60px;
150
    }
151
}
152

153
@keyframes one {
154
    from {
155
        stroke-dashoffset: calc(2 * 37 * 3.14px);
156
    }
157
    to {
158
        stroke-dashoffset: 80px;
159
    }
160
}
161

162
@keyframes two {
163
    from {
164
        stroke-dashoffset: calc(2 * 37 * 3.14px);
165
    }
166
    to {
167
        stroke-dashoffset: 140px;
168
    }
169
}