radial-meter.css
2.77 KB
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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
@import url(https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic);
.radial-progress {
@circle-size: 280px;
@circle-background: #d6dadc;
@circle-color: #97a71d;
@inset-size: 210px;
@inset-color: #fbfbfb;
@transition-length: 1s;
@shadow: 6px 6px 10px rgba(0,0,0,0.2);
@percentage-color: #97a71d;
@percentage-font-size: 35px;
@percentage-text-width: 100px;
margin: 20px auto;
width: @circle-size;
height: @circle-size;
background-color: @circle-background;
border-radius: 50%;
.circle {
.mask, .fill, .shadow {
width: @circle-size;
height: @circle-size;
position: absolute;
border-radius: 50%;
}
.shadow {
box-shadow: @shadow inset;
}
.mask, .fill {
-webkit-backface-visibility: hidden;
transition: -webkit-transform @transition-length;
transition: -ms-transform @transition-length;
transition: transform @transition-length;
border-radius: 50%;
}
.mask {
clip: rect(0px, @circle-size, @circle-size, @circle-size/2);
.fill {
clip: rect(0px, @circle-size/2, @circle-size, 0px);
background-color: @circle-color;
}
}
}
.inset {
width: @inset-size;
height: @inset-size;
position: absolute;
margin-left: (@circle-size - @inset-size)/2;
margin-top: (@circle-size - @inset-size)/2;
background-color: @inset-color;
border-radius: 50%;
box-shadow: @shadow;
.percentage {
height: @percentage-font-size;
width: @percentage-text-width;
overflow: hidden;
position: absolute;
top: (@inset-size - @percentage-font-size) / 2;
left: (@inset-size - @percentage-text-width) / 2;
line-height: 1;
.numbers {
margin-top: -@percentage-font-size;
transition: width @transition-length;
span {
width: @percentage-text-width;
display: inline-block;
vertical-align: top;
text-align: center;
font-weight: 800;
font-size: @percentage-font-size;
font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: @percentage-color;
}
}
}
}
@i: 0;
@increment: 180deg / 100;
.loop (@i) when (@i <= 100) {
&[data-progress="@{i}"] {
.circle {
.mask.full, .fill {
-webkit-transform: rotate(@increment * @i);
-ms-transform: rotate(@increment * @i);
transform: rotate(@increment * @i);
}
.fill.fix {
-webkit-transform: rotate(@increment * @i * 2);
-ms-transform: rotate(@increment * @i * 2);
transform: rotate(@increment * @i * 2);
}
}
.inset .percentage .numbers {
width: @i * @percentage-text-width + @percentage-text-width;
}
}
.loop(@i + 1);
}
.loop(@i);
}