circular progress bar html css

1.wrapper {
2  width: 100px; /* Set the size of the progress bar */
3  height: 100px;
4  position: absolute; /* Enable clipping */
5  clip: rect(0px, 100px, 100px, 50px); /* Hide half of the progress bar */
6}
7/* Set the sizes of the elements that make up the progress bar */
8.circle {
9  width: 80px;
10  height: 80px;
11  border: 10px solid green;
12  border-radius: 50px;
13  position: absolute;
14  clip: rect(0px, 50px, 100px, 0px);
15}
16/* Using the data attributes for the animation selectors. */
17/* Base settings for all animated elements */
18div[data-anim~=base] {
19  -webkit-animation-iteration-count: 1;  /* Only run once */
20  -webkit-animation-fill-mode: forwards; /* Hold the last keyframe */
21  -webkit-animation-timing-function:linear; /* Linear animation */
22}
23
24.wrapper[data-anim~=wrapper] {
25  -webkit-animation-duration: 0.01s; /* Complete keyframes asap */
26  -webkit-animation-delay: 3s; /* Wait half of the animation */
27  -webkit-animation-name: close-wrapper; /* Keyframes name */
28}
29
30.circle[data-anim~=left] {
31  -webkit-animation-duration: 6s; /* Full animation time */
32  -webkit-animation-name: left-spin;
33}
34
35.circle[data-anim~=right] {
36  -webkit-animation-duration: 3s; /* Half animation time */
37  -webkit-animation-name: right-spin;
38}
39/* Rotate the right side of the progress bar from 0 to 180 degrees */
40@-webkit-keyframes right-spin {
41  from {
42    -webkit-transform: rotate(0deg);
43  }
44  to {
45    -webkit-transform: rotate(180deg);
46  }
47}
48/* Rotate the left side of the progress bar from 0 to 360 degrees */
49@-webkit-keyframes left-spin {
50  from {
51    -webkit-transform: rotate(0deg);
52  }
53  to {
54    -webkit-transform: rotate(360deg);
55  }
56}
57/* Set the wrapper clip to auto, effectively removing the clip */
58@-webkit-keyframes close-wrapper {
59  to {
60    clip: rect(auto, auto, auto, auto);
61  }
62}
63<div class="wrapper" data-anim="base wrapper">
64  <div class="circle" data-anim="base left"></div>
65  <div class="circle" data-anim="base right"></div>
66</div>

1<div class="container">
2  <div class="box">
3    <div class="chart" data-percent="90" >90%</div>
4    <h2>HTML</h2>
5  </div>
6  <div class="box">
7    <div class="chart" data-percent="72" >72%</div>
8    <h2>CSS</h2>
9  </div>
10  <div class="box">
11    <div class="chart" data-percent="81" >81%</div>
12    <h2>JAVASCRIPT</h2>
13  </div>
14 
15</div>