circular progression css

1*{
2  margin: 0;
3  padding: 0;
4  font-family: 'Arial', sans-serif;
5}
6html, body{
7  display:grid;
8  height:100%;
9  text-align: center;
10  place-items: center;
11  background: #dde6f0;
12}
13.circular{
14  height:100px;
15  width: 100px;
16  position: relative;
17  transform:scale(2);
18}
19.circular .inner{
20  position: absolute;
21  z-index: 6;
22  top: 50%;
23  left: 50%;
24  height: 80px;
25  width: 80px;
26  margin: -40px 0 0 -40px;
27  background: #dde6f0;
28  border-radius: 100%;
29 
30}
31.circular .number{
32  position: absolute;
33  top:50%;
34  left:50%;
35  transform: translate(-50%, -50%);
36  z-index:10;
37  font-size:18px;
38  font-weight:500;
39  color:#4158d0;
40}
41.circular .bar{
42  position: absolute;
43  height: 100%;
44  width: 100%;
45  background: #fff;
46  -webkit-border-radius: 100%;
47  clip: rect(0px, 100px, 100px, 50px);
48}
49.circle .bar .progress{
50  position: absolute;
51  height: 100%;
52  width: 100%;
53  -webkit-border-radius: 100%;
54  clip: rect(0px, 50px, 100px, 0px);
55  background: #4158d0;
56}
57.circle .left .progress{
58  z-index:1;
59  animation: left 4s linear both;
60}
61@keyframes left{
62  100%{
63    transform: rotate(180deg);
64  }
65}
66.circle .right {
67  transform: rotate(180deg);
68  z-index:3;
69 
70}
71.circle .right .progress{
72  animation: right 4s linear both;
73  animation-delay:4s;
74}
75@keyframes right{
76  100%{
77    transform: rotate(180deg);
78  }
79}