CSS transform for creating water wave loader with live demo
CSS transform property for creating a loader
In this tutorial, the transform property of CSS is used along with other properties for creating a loader for the web pages. You may use this for loading a complete web page or certain section or feature in a web site.
The transform CSS property can be used for creating 2D or 3D transformations to the specified elements like div. For example:
|
1 2 3 |
-webkit-transform: translate(0, 50%); transform: translate(0, 50%); |
Where the webkit is used for the chrome, safari and opera browsers. The translate value is one of the supported value in transform property with 2D values. You may also use three values to define 3D transformation.
See the following section for live demos of using the transform property along with the complete code.
A demo of water wave loader by using transform property
In this demo, a pre-loader is created with the water wave effect. It shows the percentage of filling the “water” as it moves. Practically, it can be site or images etc. loaded where it is being used.
The example used transform property with translate value for 2D. Along with this, many other CSS properties are used like background, border-radius etc. Have a look:
See online demo and code
The CSS used in the example:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 |
*, *:before, *:after { box-sizing: border-box; outline: none; } body { background: #020438; font: 14px/1 'Open Sans', helvetica, sans-serif; -webkit-font-smoothing: antialiased; } .water-jar { height: 280px; width: 280px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background: #020438; border-radius: 100%; overflow: hidden; } .water-jar .water-filling { position: absolute; left: 0; top: 0; z-index: 3; width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; display: -webkit-flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; color: #fff; font-size: 64px; } .water-jar .water { position: absolute; left: 0; top: 0; z-index: 2; width: 100%; height: 100%; -webkit-transform: translate(0, 100%); transform: translate(0, 100%); background: #4D6DE3; } .water-jar .water_wave { width: 200%; position: absolute; bottom: 100%; } .water-jar .water_wave_back { right: 0; fill: #C7EEFF; -webkit-animation: wave-back 1.4s infinite linear; animation: wave-back 1.4s infinite linear; } .water-jar .water_wave_front { left: 0; fill: #4D6DE3; margin-bottom: -1px; -webkit-animation: wave-front .7s infinite linear; animation: wave-front .7s infinite linear; } @-webkit-keyframes wave-front { 100% { -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); } } @keyframes wave-front { 100% { -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); } } @-webkit-keyframes wave-back { 100% { -webkit-transform: translate(50%, 0); transform: translate(50%, 0); } } @keyframes wave-back { 100% { -webkit-transform: translate(50%, 0); transform: translate(50%, 0); } } |
The markup:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<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;"> <symbol id="wave"> <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> <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> <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> <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> </symbol> </svg> <div class="water-jar"> <div class="water-filling"> <div class="percentNum" id="count">0</div> <div class="percentB">%</div> </div> <div id="water" class="water"> <svg viewBox="0 0 560 20" class="water_wave water_wave_back"> <use xlink:href="#wave"></use> </svg> <svg viewBox="0 0 560 20" class="water_wave water_wave_front"> <use xlink:href="#wave"></use> </svg> </div> </div> |
The script:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<script> var cnt=document.getElementById("count"); var water=document.getElementById("water"); var percent=cnt.innerText; var interval; interval=setInterval(function(){ percent++; cnt.innerHTML = percent; water.style.transform='translate(0'+','+(100-percent)+'%)'; if(percent==100){ clearInterval(interval); } },60); </script> |
Get the complete code and see the live demo by clicking the above links.
(Credit = ElaineXu)