The preloader by using CSS
You may use this preloader as the content of the website is loading behind the scene. For example, images are heavy and you want all images to be loaded for the carousel or other sections of the web page or your website has a heavy app that takes some time for downloading.
You may use a pre-loader for that purpose which is visible to the visitors so they know something is happening behind rather than leaving the website.
Have a look at the demos below where a pre-loader is build by using pure CSS and implemented with Bootstrap framework. Although, you may use it for any website other than Bootstrap as well.
A demo of CSS preloader
Click the image or link below to see the pre-loader live in action. You may see and take the complete code including CSS and markup from the left pane of demo page:
See online demo and code
For making this pre-loader, a few CSS3 properties are also used like animation, animation-direction, box-shadow, transform with translate and more.
Get the complete code from the demo page.
A demo with another style by changing CSS 3 properties
Have a look at another preloader that uses CSS 3 properties. This time, I used the:
animation-direction: alternate-reverse;
for box styles.
See online demo and code
The angle of 2D transform method (CSS 3 property) is also changed as compared to above demo:
0% {
transform: translatex(-90px);
}
50% {
transform: translatex(120px);
}
The complete CSS is:
.pre-loader-demo{
width: 180px;
display: flex;
justify-content: center;
overflow: hidden;
margin: 60px auto;
}
.pre-loader-demo .inner-part-preloader{
width: 10px;
height: 30px;
padding: 2px;
border-radius:50%;
background-color: rgba(64, 128, 128, 0.8);
box-shadow: -15px 0 0 rgba(0, 0, 0, 0.9), -30px 0 0 rgba(0, 0, 0, 0.6), 15px 0 0 rgba(0, 0, 0, 0.3), 30px 0 0 rgba(0, 0, 0, 0.1);
}
.box-style{
position: relative;
width: 100%;
height: 100%;
background-color: #A9D3D3;
box-shadow: -15px 0 0 #FF9191, 15px 0 0 #FF5555;
animation: loading 2s steps(7, end) infinite;
animation-direction: alternate-reverse;
}
@-webkit-keyframes loading{
0% {
transform: translatex(-90px);
}
50% {
transform: translatex(120px);
}
}
@keyframes loading{
0% {
transform: translatex(-90px);
}
50% {
transform: translatex(120px);
}
}
The markup:
<div class="row"> <div class="col-md-6"> <div class="pre-loader-demo"> <div class="inner-part-preloader"> <div class="box-style"></div> </div> </div> </div> </div>
You may try different values and colors for main box, inner boxes 2D transform etc. for creating a preloader as per need.