How can I achieve a gradient effect within a circle using the following initial code:
HTML:
<div class="progresss">
<div class="barOverflow">
<div class="bar"></div>
</div>
<span>10</span>%
</div>
<div class="progresss">
<div class="barOverflow">
<div class="bar"></div>
</div>
<span>75</span>%
</div>
SCSS:
.progresss{
position: relative;
margin: 4px;
float:left;
text-align: center;
}
.barOverflow{ /* Wraps the rotating .bar */
position: relative;
//overflow: hidden; /* Omit this line to grasp the trick */
width: 145px; height: 45px; /* Half of a circle (overflow) */
margin-bottom: -14px; /* elevate the numbers */
&:after {
content: '';
position: relative;
display: block;
top: -75px;
width: 145px;
height: 90px;
background-color: #f3f5f6;
}
}
.bar{
position: relative;
top: 0; left: 0;
width: 145px; height: 145px; /* Complete circle! */
border-radius: 50%;
box-sizing: border-box;
border: 27px solid red; /* Half is red, */
border-bottom-color: green; /* Half is green */
border-right-color: green;
}
JS:
$(".progresss").each(function(){
var $bar = $(this).find(".bar");
var $val = $(this).find("span");
var perc = parseInt( $val.text(), 10);
$({p:0}).animate({p:perc}, {
duration: 3000,
easing: "swing",
step: function(p) {
$bar.css({
transform: "rotate("+ (45+(p*1.8)) +"deg)", // 100%=180° so: ° = % * 1.8
// 45 is to add the needed rotation to have the green borders at the bottom
});
$val.text(p|0);
}
});
});
My desired outcome: