Loaders are most frequently used in web-applications or websites. Here this blog shows the enabling of loader image from Jquery and closing the loader image with an overlay from code-behind. Generally, Loader image is used when the event takes some time to execute the code we use this loader image to buy some time from the user.
Step 1: HTML code
<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>Nunc suscipit velit non ante sagittis aliquam. Suspendisse consequat ante augue, sed luctus quam pulvinar ut. Etiam tempus nunc quam, sed facilisis mauris hendrerit sit amet. Nam orci neque, mollis in dignissim et, dignissim et lorem. Ut consequat interdum fringilla. Nunc laoreet tellus ipsum, non lobortis massa mattis at. Quisque lacinia arcu et lacus malesuada, ac interdum nibh fermentum. Vestibulum interdum erat ut laoreet feugiat. Morbi tellus nulla, hendrerit vitae nulla nec, luctus faucibus eros. Donec consequat massa nec ipsum mollis, a sollicitudin est sodales. Nam vulputate, odio eu consequat mollis, leo nisl tempus augue, vitae porttitor nunc nunc ut lorem.</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>
Step 2: CSS code:
#loader:after,
#loader:before {
position: absolute;
content: ""
}
#loader:after,
#loader:before {
content: ""
}
#loader-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000
}
#loader {
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: 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 {
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 {
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 {
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 {
left: 0
}
#loader-wrapper .loader-section.section-right {
right: 0
}
.loaded #loader-wrapper .loader-section.section-left {
-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 {
-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 {
opacity: 0;
-webkit-transition: all .3s ease-out;
transition: all .3s ease-out
}
.loaded #loader-wrapper {
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
}
Step 3: Jquery code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
setTimeout(function() {
// set timeout is to simulate the loading time
$('body').addClass('loaded');
}, 4000);
</script>
For output click here: https://jsfiddle.net/xcwk1g9n/1/
Happy Coding :)
0 Comment(s)