html css circle progress bar

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>