-
Notifications
You must be signed in to change notification settings - Fork 2
/
simpleGauge.css
99 lines (91 loc) · 1.83 KB
/
simpleGauge.css
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
.gauge-wrap {
position:relative;
margin:50px;
width:200px;
height:100px;
}
.gauge-core {
position:relative;
overflow:hidden;
height:inherit;
width:inherit;
}
.gauge-wrap-before {
position:absolute;
width:16px;
height:16px;
bottom:-7px; /* 1px less to cover clipping */
left:0px;
clip: rect(8px, 16px, 16px, 0px);
-webkit-border-radius:8px;
-moz-border-radius:8px;
border-radius:8px;
z-index:5;
}
.gauge-wrap-after {
position:absolute;
width:16px;
height:16px;
bottom:-7px; /* 1px less to cover clipping */
right:0px;
clip: rect(8px, 16px, 16px, 0px);
-webkit-border-radius:8px;
-moz-border-radius:8px;
border-radius:8px;
z-index:5;
}
.gauge-bg {
position: absolute;
width: 200px;
height: 200px;
-webkit-border-radius:100px;
-moz-border-radius:100px;
border-radius:100px;
z-index:0;
}
.gauge-active-wrap {
position: absolute;
top:0;
left:0;
width: 200px;
height: 200px;
overflow:hidden;
-webkit-border-radius:100px;
-moz-border-radius:100px;
border-radius:100px;
}
.gauge-active {
top:100px;
position: absolute;
width: 200px;
height: 100px;
overflow:visible;
-webkit-border-radius:0px 0px 200px 200px;
-moz-border-radius:0px 0px 200px 200px;
border-radius:0px 0px 200px 200px;
z-index:1;
}
.gauge-active-before {
position:absolute;
width:16px;
height:16px;
background-color: inherit;
top:-7px; /* 1px less to cover clipping */
left:0px;
clip: rect(0px, 16px, 8px, 0px);
-webkit-border-radius:8px;
-moz-border-radius:8px;
border-radius:8px;
z-index:5;
}
.gauge-cap {
position: absolute;
top:16px;
left:16px;
width: 168px;
height: 168px;
-webkit-border-radius:84px;
-moz-border-radius:84px;
border-radius:84px;
z-index:5;
}