We would like to know how to make a progress bar in a circle.
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
#progressWrap {<!-- w w w. jav a2s. c om-->
width: 50px;
height: 50px;
display: block;
background-color: forestgreen;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-ms-border-radius: 100%;
border-radius: 100%;
overflow: hidden;
}
.progressRed {
width: 15%;
height: 50px;
float: right;
background-color: red;
}
</style>
</head>
<body>
<div id="progressWrap">
<span class="progressRed"></span>
</div>
</body>
</html>
The code above is rendered as follows: