1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
|
<div class="progress">
<svg
width="200"
height="200"
viewBox="0 0 230 230"
transform="rotate(270)"
>
<defs>
<linearGradient id="orange" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#F34D4D" />
<stop offset="100%" stop-color="#F27D31" />
</linearGradient>
</defs>
<circle
cx="115"
cy="115"
r="87"
fill="none"
stroke="#cccccc"
stroke-width="10"
/>
<circle
cx="115"
cy="115"
r="87"
fill="none"
stroke="url(#orange)"
stroke-width="10"
stroke-dasharray="50,547"
stroke-linecap="round"
/>
</svg>
<span class="text">30%</span>
</div>
<style>
.progress {
position: relative;
width: 200px;
height: 200px;
}
.progress .text {
position: absolute;
width: 100%;
text-align: center;
left: 0;
top: 50%;
transform: translateY(-50%);
font-size: 30px;
font-weight: 500;
color: #F34D4D;
}
</style>
|
