mirror_css/css-progress-pie
1
0
Fork 0
mirror of https://github.com/oliviale/CSS-Progress-Pie.git synced 2025-08-08 13:36:28 +02:00
Code Issues Releases Wiki Activity

css files

Browse Source
This commit is contained in:
oliviale
2017-06-11 15:54:07 +08:00
parent eb5c1decd8
commit 5dfa3612b5
5 changed files with 1230 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
css/progress_pie_color_compiled.css Normal file
View File

File diff suppressed because one or more lines are too long

74
css/progress_pie_color_scss.scss Normal file
View File

@@ -0,0 +1,74 @@
/* CSS Progress Pie by Olivia Ng | MIT License | github.com/oliviale/css-progress-pie*/
.progress-pie-color {
width: 60px;
height: 60px;
border-radius: 50%;
background: #eee;
position: relative;
display: inline-block;
}
.progress-pie-color::before {
content: '';
display: block;
margin-left: 50%;
height: 100%;
border-radius: 0 100% 100% 0 / 50%;
background-color: inherit;
transform-origin: left;
}
.progress-pie-color::after {
content: attr(data-value);
position: absolute;
width: 70%;
height: 70%;
margin: auto;
border-radius: 50%;
background-color: #fff;
left: 0;
right: 0;
top: 0;
bottom: 0;
text-align: center;
font: 900 20px/41px Lato;
}
@for $i from 0 through 40 {
.progress-pie-color[data-value="#{$i}"] {
background-image: linear-gradient(to right, transparent 50%, #cc0000 0);
&:before {
transform: rotate(#{$i/100}turn);
}
}
}
@for $i from 41 through 50 {
.progress-pie-color[data-value="#{$i}"] {
background-image: linear-gradient(to right, transparent 50%, #ffcf3a 0);
&:before {
transform: rotate(#{$i/100}turn);
}
}
}
@for $i from 51 through 70 {
.progress-pie-color[data-value="#{$i}"] {
background-image: linear-gradient(to right, transparent 50%, #ffcf3a 0);
&:before {
background-color: #ffcf3a;
transform: rotate(#{$i/100 - .5}turn);
}
}
}
@for $i from 71 through 100 {
.progress-pie-color[data-value="#{$i}"] {
background-image: linear-gradient(to right, transparent 50%, #09944a 0);
&:before {
background-color: #09944a;
transform: rotate(#{$i/100 - .5}turn);
}
}
}

2
css/progress_pie_compiled.css Normal file
View File

File diff suppressed because one or more lines are too long

50
css/progress_pie_scss.scss Normal file
View File

@@ -0,0 +1,50 @@
/* CSS Progress Pie by Olivia Ng | MIT License | github.com/oliviale/css-progress-pie*/
.progress-pie {
width: 60px;
height: 60px;
border-radius: 50%;
background: #eee;
background-image: linear-gradient(to right, transparent 50%, #4CC9D8 0);
position: relative;
display: inline-block;
}
.progress-pie::before {
content: '';
display: block;
margin-left: 50%;
height: 100%;
border-radius: 0 100% 100% 0 / 50%;
background-color: inherit;
transform-origin: left;
}
.progress-pie::after {
content: attr(data-value);
position: absolute;
width: 70%;
height: 70%;
margin: auto;
border-radius: 50%;
background-color: #fff;
left: 0;
right: 0;
top: 0;
bottom: 0;
text-align: center;
font: 900 20px/41px Tahoma;
}
@for $i from 0 through 50 {
.progress-pie[data-value="#{$i}"]:before {
transform: rotate(#{$i/100}turn);
}
}
@for $i from 51 through 100 {
.progress-pie[data-value="#{$i}"]:before {
background-color: #4CC9D8;
transform: rotate(#{$i/100 - .5}turn);
}
}

1102
css/progress_pie_unicorn.css Normal file
View File

File diff suppressed because it is too large Load Diff