We can design a loader using HTML/CSS.
In the below example the loader is designed using transition. Transition is used for animation in HTML.
To see the transition effect we have to use to things:-
1. CSS effect which we want to apply.
2. Time duration of the effect.
HTML-
<body>
<div id="loader-wrapper">
<div id="loader"></div>
<div class="loader-section section-left"></div>
<div class="loader-section section-right"></div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce neque nibh, scelerisque a placerat ac, blandit et urna. Etiam vel ornare lacus. Nullam placerat a metus et eleifend. Suspendisse potenti. Pellentesque cursus purus in lorem eleifend molestie. Proin placerat laoreet quam non varius. Integer tincidunt at eros vel cursus. Pellentesque sit amet lacus sit amet risus facilisis sodales. Etiam sit amet efficitur dui. Suspendisse potenti. Nulla interdum, ante eu gravida tempus, metus lacus suscipit ante, id luctus eros turpis sed dui. Aliquam hendrerit, erat vel convallis tincidunt, libero nunc tempus ipsum, sed aliquet dolor eros a leo. Sed non varius justo.</p>
<p>Aenean commodo congue lectus, vel hendrerit lorem tincidunt sed. Pellentesque ultricies tellus vitae tincidunt bibendum. Phasellus maximus justo vitae justo vestibulum mollis. Phasellus scelerisque urna turpis, in ornare tellus cursus ut. Cras ac cursus lorem, nec rhoncus metus. In porttitor cursus dolor ut mattis. Curabitur auctor nisl non sem luctus molestie. Fusce varius leo a varius porta.</p>
<p>Proin fermentum lectus venenatis leo ullamcorper egestas. Quisque placerat accumsan nulla vitae hendrerit. Praesent laoreet egestas lacinia. Quisque nibh ligula, rutrum quis tortor a, semper suscipit mauris. Vestibulum ac faucibus arcu. Mauris vitae metus ac elit gravida ornare. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
<p>Etiam nec orci quis augue pretium gravida. Curabitur id ultrices turpis. Etiam ullamcorper fermentum est, quis lacinia ipsum feugiat sed. Vivamus justo est, venenatis eget lacus quis, volutpat accumsan nulla. Quisque a convallis sapien. Ut tempor dui in volutpat fermentum. In laoreet pharetra mi, malesuada lobortis odio. Morbi sit amet tincidunt odio, non tempus turpis. Proin ac metus eget libero vestibulum elementum eu id ligula. Fusce ut feugiat nisi. </p>
</body>
CSS-
#loader:after,
#loader:before {
position: absolute;
content: ""
}
#loader:after,
#loader:before {
content: ""
}
#loader-wrapper {/*this is the background of loader*/
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000
}
#loader {/*loading ring with animation*/
display: block;
position: relative;
left: 50%;
top: 50%;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
border-radius: 50%;
border: 4px solid transparent;
border-top-color: #fff;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
z-index: 1001
}
#loader:before {/*top border of loader*/
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
border-radius: 50%;
border: 4px solid transparent;
border-top-color: #fff;
-webkit-animation: spin 3s linear infinite;
animation: spin 3s linear infinite
}
#loader:after {/*bottom border of loader*/
top: 15px;
left: 15px;
right: 15px;
bottom: 15px;
border-radius: 50%;
border: 4px solid transparent;
border-top-color: #fff;
-webkit-animation: spin 1.5s linear infinite;
animation: spin 1.5s linear infinite
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0)
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg)
}
}
@keyframes spin {/*these keyframes are used for animation means rotation of loader*/
0% {
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0)
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg)
}
}
#loader-wrapper .loader-section {/*loader's maximum area*/
position: fixed;
top: 0;
width: 51%;
height: 100%;
background: #86C555;
z-index: 1000;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0)
}
#loader-wrapper .loader-section.section-left {/*one of the three loaders*/
left: 0
}
#loader-wrapper .loader-section.section-right {/*second loader*/
right: 0
}
.loaded #loader-wrapper .loader-section.section-left {*/animation for first loader*/
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
-webkit-transition: all .7s .3s cubic-bezier(.645, .045, .355, 1);
transition: all .7s .3s cubic-bezier(.645, .045, .355, 1)
}
.loaded #loader-wrapper .loader-section.section-right {/*animation for second loader*/
-webkit-transform: translateX(100%);
-ms-transform: translateX(100%);
transform: translateX(100%);
-webkit-transition: all .7s .3s cubic-bezier(.645, .045, .355, 1);
transition: all .7s .3s cubic-bezier(.645, .045, .355, 1)
}
.loaded #loader {/*completion of loader*/
opacity: 0;
-webkit-transition: all .3s ease-out;
transition: all .3s ease-out
}
.loaded #loader-wrapper {/*hiding animation of loader screen*/
visibility: hidden;
-webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%);
-webkit-transition: all .3s 1s ease-out;
transition: all .3s 1s ease-out
}
jQuery-
Here is the jQuery to show loader for 2 seconds, after that it will disappear.
<script type="text/javascript">
setTimeout(function() {
// set timeout is to simulate the loading time
$('body').addClass('loaded');
}, 2000);
</script>
Here is the link of above code:-
https://jsfiddle.net/2ofjaL97/4/
0 Comment(s)