87 lines
2.9 KiB
CSS
87 lines
2.9 KiB
CSS
|
/****************************************************************
|
||
|
|
*
|
||
|
|
* CSS Percentage Circle
|
||
|
|
* Based on CSS provided by Andre Firchow
|
||
|
|
*
|
||
|
|
*****************************************************************/
|
||
|
|
|
||
|
|
.prog-circle .slice {
|
||
|
|
position : absolute;
|
||
|
|
width : 1em;
|
||
|
|
height : 1em;
|
||
|
|
clip : rect(0em, 1em, 1em, 0.5em);
|
||
|
|
}
|
||
|
|
.prog-circle .slice.clipauto {
|
||
|
|
clip : rect(auto, auto, auto, auto);
|
||
|
|
}
|
||
|
|
.prog-circle .fill, .prog-circle .bar {
|
||
|
|
position : absolute;
|
||
|
|
border : 0.84em solid #036db4;
|
||
|
|
width : 1em !important;
|
||
|
|
height : 1em !important;
|
||
|
|
clip : rect(0em, .5em, 1em, 0em);
|
||
|
|
-webkit-border-radius : 50%;
|
||
|
|
-moz-border-radius : 50%;
|
||
|
|
-ms-border-radius : 50%;
|
||
|
|
-o-border-radius : 50%;
|
||
|
|
border-radius : 50%;
|
||
|
|
-webkit-transform : rotate(20deg);
|
||
|
|
-moz-transform : rotate(20deg);
|
||
|
|
-ms-transform : rotate(20deg);
|
||
|
|
-o-transform : rotate(20deg);
|
||
|
|
transform : rotate(20deg);
|
||
|
|
}
|
||
|
|
.prog-circle {
|
||
|
|
position : relative;
|
||
|
|
font-size : 100px;
|
||
|
|
width : 1em;
|
||
|
|
height : 1em;
|
||
|
|
-webkit-border-radius : 50%;
|
||
|
|
-moz-border-radius : 50%;
|
||
|
|
-ms-border-radius : 50%;
|
||
|
|
-o-border-radius : 50%;
|
||
|
|
border-radius : 50%;
|
||
|
|
float : left;
|
||
|
|
margin : 0 0em 0.1em 0;
|
||
|
|
background-color : #95c9fe;
|
||
|
|
}
|
||
|
|
.prog-circle .percenttext {
|
||
|
|
position : absolute;
|
||
|
|
width : 100%;
|
||
|
|
height : 1em;
|
||
|
|
z-index : 1;
|
||
|
|
margin : auto;
|
||
|
|
top : 0;
|
||
|
|
left : 0;
|
||
|
|
right : 0;
|
||
|
|
bottom : 0;
|
||
|
|
font-size : 0.3em;
|
||
|
|
color : #036db4;
|
||
|
|
display : block;
|
||
|
|
text-align : center;
|
||
|
|
white-space : nowrap;
|
||
|
|
line-height : 100%;
|
||
|
|
-webkit-transition-duration : 0.2s;
|
||
|
|
-moz-transition-duration : 0.2s;
|
||
|
|
-o-transition-duration : 0.2s;
|
||
|
|
transition-duration : 0.2s;
|
||
|
|
-webkit-transition-timing-function : ease-out;
|
||
|
|
-moz-transition-timing-function : ease-out;
|
||
|
|
-o-transition-timing-function : ease-out;
|
||
|
|
transition-timing-function : ease-out;
|
||
|
|
}
|
||
|
|
.prog-circle .after {
|
||
|
|
position : absolute;
|
||
|
|
top : 0.08em;
|
||
|
|
left : 0.08em;
|
||
|
|
display : block;
|
||
|
|
content : " ";
|
||
|
|
-webkit-border-radius : 50%;
|
||
|
|
-moz-border-radius : 50%;
|
||
|
|
-ms-border-radius : 50%;
|
||
|
|
-o-border-radius : 50%;
|
||
|
|
border-radius : 50%;
|
||
|
|
background-color : #FFFFFF;
|
||
|
|
width : 0.84em;
|
||
|
|
height : 0.84em;
|
||
|
|
}
|