<div
class="progress-pie"
data-value="93"></div>
Red for numbers 1 to 40, yellow for 41 to 70 and green for 71 to 100.
<div
class="progress-pie-color"
data-value="22"></div>
<div
class="progress-pie-color"
data-value="55"></div>
<div
class="progress-pie-color"
data-value="93"></div>
Answer the question below truthfully.
It is advised to make your changes in the SCSS file and compile it to CSS.
Otherwise, please make good use of your Find All + Replace option.
.progress-pie {
background-image: linear-gradient(to right, transparent 50%, #bf62a6 0);
}
@for $i from 51 through 100 {
.progress-pie[data-value="#{$i}"]:before {
background-color: #bf62a6;
}
}
Changes are made to the background-color property of .progress-pie.
.progress-pie-unicorn.dark-ring {
background-color: #222;
}
// white-ring with box shadow
.progress-pie.gray-ring {
background-color: #fff;
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
}
.progress-pie.gray-ring:after {
box-shadow: inset 1px 0px 3px rgba(0,0,0,0.3);
}
Changes are made to the :after pseudo-element of .progress-pie.
.progress-pie.dark-theme:after {
background: #111;
color: #ffcf3a;
}
// changing font
.progress-pie.normal-theme:after {
font: 700 26px/42px 'Palatino', serif;
}
// using a transparent background works
.progress-pie.transparent:after {
background: transparent;
}
The pie must always be a square, i.e. the height and width must be the same.
Do note that if you adjust the size too much, you will need to adjust the font size as well. Balance.
.progress-pie.large {
width: 90px;
height: 90px;
}
.progress-pie.small {
width: 40px;
height: 40px;
}
Change the size of ring by adjusting the width and height of the text overlap. The width and height must also be the same.
Do note that if you adjust the size too much, you will need to adjust the font size as well. Balance.
.progress-pie.thick:after {
width: 45%;
height: 45%;
}
.progress-pie.thin:after {
width: 90%;
height: 90%;
}