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 website.
The transform CSS property can be used for creating 2D or 3D transformations to the specified elements like div. For example:
-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 values 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 a water wave loader 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 a 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:
*, *: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:
<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:
<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)