• CSS
  • JS
​x
22
 
1
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" style="display: none;">
2
  <symbol id="wave">
3
    <path d="M420,20c21.5-0.4,38.8-2.5,51.1-4.5c13.4-2.2,26.5-5.2,27.3-5.4C514,6.5,518,4.7,528.5,2.7c7.1-1.3,17.9-2.8,31.5-2.7c0,0,0,0,0,0v20H420z"></path>
4
    <path d="M420,20c-21.5-0.4-38.8-2.5-51.1-4.5c-13.4-2.2-26.5-5.2-27.3-5.4C326,6.5,322,4.7,311.5,2.7C304.3,1.4,293.6-0.1,280,0c0,0,0,0,0,0v20H420z"></path>
5
    <path d="M140,20c21.5-0.4,38.8-2.5,51.1-4.5c13.4-2.2,26.5-5.2,27.3-5.4C234,6.5,238,4.7,248.5,2.7c7.1-1.3,17.9-2.8,31.5-2.7c0,0,0,0,0,0v20H140z"></path>
6
    <path d="M140,20c-21.5-0.4-38.8-2.5-51.1-4.5c-13.4-2.2-26.5-5.2-27.3-5.4C46,6.5,42,4.7,31.5,2.7C24.3,1.4,13.6-0.1,0,0c0,0,0,0,0,0l0,20H140z"></path>
7
  </symbol>
8
</svg>
9
<div class="box-lod">
10
  <div class="percent">
11
    <div class="percentNum" id="count">0</div>
12
    <div class="percentB">%</div>
13
  </div>
14
  <div id="water" class="water">
15
    <svg viewBox="0 0 560 20" class="water_wave water_wave_back">
16
      <use xlink:href="#wave"></use>
17
    </svg>
18
    <svg viewBox="0 0 560 20" class="water_wave water_wave_front">
19
      <use xlink:href="#wave"></use>
20
    </svg>
21
  </div>
22
</div>
xxxxxxxxxx
1
109
 
1
body {
2
  background: #0d1018 !important;
3
  color: #fff !important;
4
  font-family: 'Open Sans', sans-serif;
5
  font-size: 31px;
6
  font-weight: 800;
7
  line-height: 37px;
8
}
9
.box-lod {
10
  height: 150px;
11
  width: 150px;
12
  position: absolute;
13
  top: 10%;
14
  left: 50%;
15
  -webkit-transform: translate(-50%, -50%);
16
          transform: translate(-50%, -50%);
17
  background: #020438;
18
  border-radius: 100%;
19
  overflow: hidden;
20
  margin: 7em 0em;
21
}
22
.percentB {
23
    font-size: 30px;
24
    font-weight: 700;
25
}
26
.percentNum {
27
    font-size: 30px;
28
    font-weight: 700;
29
}
30
.box-lod .percent {
31
  position: absolute;
32
  left: 0;
33
  top: 0;
34
  z-index: 3;
35
  width: 100%;
36
  height: 100%;
37
  display: -webkit-box;
38
  display: flex;
39
  display: -webkit-flex;
40
  -webkit-box-align: center;
41
          align-items: center;
42
  -webkit-box-pack: center;
43
          justify-content: center;
44
  color: darkgreen;
45
  font-size: 64px;
46
}
47
​
48
.box-lod .water {
49
  position: absolute;
50
  left: 0;
51
  top: 0;
52
  z-index: 2;
53
  width: 100%;
54
  height: 100%;
55
  -webkit-transform: translate(0, 100%);
56
          transform: translate(0, 100%);
57
  /*background: #4D6DE3;*/
58
/*  background: blueviolet;*/
59
background: springgreen;
60
  -webkit-transition: all .3s;
61
  transition: all .3s;
62
}
63
.box-lod .water_wave {
64
  width: 200%;
65
  position: absolute;
66
  bottom: 100%;
67
}
68
.box-lod .water_wave_back {
69
  right: 0;
70
  /*fill: #C7EEFF;*/
71
  
72
  fill: #CAFFE4;
73
  -webkit-animation: wave-back 1.4s infinite linear;
74
          animation: wave-back 1.4s infinite linear;
75
}
76
.box-lod .water_wave_front {
77
  left: 0;
78
  fill: #00FF7F;
79
  /*fill: #4D6DE3;*/
80
  margin-bottom: -1px;
81
  -webkit-animation: wave-front .7s infinite linear;
82
          animation: wave-front .7s infinite linear;
83
}
84
​
85
@-webkit-keyframes wave-front {
86
  100% {
87
    -webkit-transform: translate(-50%, 0);
88
            transform: translate(-50%, 0);
89
  }
90
}
91
​
92
@keyframes wave-front {
93
  100% {
94
    -webkit-transform: translate(-50%, 0);
95
            transform: translate(-50%, 0);
96
  }
97
}
98
@-webkit-keyframes wave-back {
99
  100% {
100
    -webkit-transform: translate(50%, 0);
101
            transform: translate(50%, 0);
102
  }
103
}
104
@keyframes wave-back {
105
  100% {
106
    -webkit-transform: translate(50%, 0);
107
            transform: translate(50%, 0);
108
  }
109
}
xxxxxxxxxx
1
23
 
1
for (let num=0; num<101; num++) {
2
   task(num);
3
}
4
  
5
function task(num) {
6
  var number = num;
7
8
  console.log(number);
9
  setTimeout(function() {
10
      var per = number;
11
      var progres = parseInt(per);
12
      var cnt=document.getElementById("count");
13
      var water=document.getElementById("water");
14
      var percent=cnt.innerText;
15
      var interval;
16
      cnt.innerHTML = progres;
17
      water.style.transform='translate(0'+','+(100-progres)+'%)';
18
      if(progres==100){
19
           clearInterval(interval);
20
      }
21
  }, 80 * num);
22
  
23
}
Write your code & show your skills
Description

Water circle loading animation progress bar animation made with html css


Do You Like This Work ? Hired Me.

This User Available To Hire




COMMENTS ( 0 )


Sign up to join the conversation

Add your feedback to this Design’s project by signing in or signing up.

Ads
Share

1
0
241
Published:

0
%