I have created 4 blocks, and over that in the middle goes a circle with transparent background and with a border. How could it be possible to make that border a progress bar? Or is there a way to make the border grow? For example only 40% of the border is colored, rest is other color? Here is my current HTML/CSS code
.block {
width: 200px;
height: 200px;
background-color: purple;
display: inline-block;
margin-right: 10px;
margin-top: 10px;
position:relative;
z-index: -1;
}
.circle {
width: 140px;
height: 140px;
background: transparent;
border: 40px solid orange;
position: absolute;
z-index: 1;
margin-left: 95px;
margin-top: 110px;
border-radius: 50%;
-webkit-box-shadow: inset 0px 0px 53px -13px rgba(0,0,0,0.75);
-moz-box-shadow: inset 0px 0px 53px -13px rgba(0,0,0,0.75);
box-shadow: inset 0px 0px 53px -13px rgba(0,0,0,0.75);
} <!DOCTYPE html>
<html>
<body>
</body>
<div class="blocks">
<div class="circle">
</div>
<div class="block">
</div>
<div class="block">
</div><br />
<div class="block">
</div>
<div class="block">
</div></div>
</body>
