Pure CSS3 Pre-Loader

Pure CSS3 Pre-Loader

Pre-loaders are a common sight in modern web design. As users we expect the web to be fast and fluid – we don’t like waiting for things. Pre-loaders offer visual feedback in the event of content being loaded, thereby managing expectations and reducing the chance of a user abandoning your website.

Before we dive into building our collection of CSS3 pre-loaders, first I’ll be discussing some of the attributes of CSS3 which are essential for creating these type of pre-loaders.

Pseudo elements are really useful in helping creating CSS3 pre-loaders. Pseudo elements essentially create a fake element before or after the HTML element in question.

“Pseudo is derived from the Greek word pseudēs which means false.” 

This is similar to creating an extra element that doesn’t really exist however pseudo elements can be styled using CSS. These pseudo elements aren’t a necessity for creating CSS3 pre-loaders but they do come in handy and allow us to use minimal markup.

Pseudo elements can be styled exactly the same way as you would any other HTML element the only difference being that you must specify a content property. Without specifying this the pseudo element will not render. The content property can contain any text which may be useful if your pre-loader needs to contain words such as “Loading…” however if you don’t need any text content then you can just leave the content property blank.

#HTML

<!–
Created by TAQI RAZA KHAN
Phone: +92-345-7372343
Website: http://www.taqirazakhan.com
–>
<div class=”wrapper”>
<h1>Pure CSS3 Pre-Loader</h1>
<div id=”preloader_1″>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>

#CSS

/*
Created by TAQI RAZA KHAN
Phone: +92-345-7372343
Website: http://www.taqirazakhan.com
*/
body{
background:#dedede;
}
.wrapper{
border:1px solid #000;
width:550px;
margin:0 auto;
text-align:center;
padding:200px 0;
}
#preloader_1{
position:relative;
width:40px;
margin:0 auto;
}
#preloader_1 span{
display:block;
bottom:0px;
width: 10px;
height: 8px;
background:#9b59b6;
position:absolute;
animation: preloader_1 1.5s infinite ease-in-out;
}

#preloader_1 span:nth-child(2){
left:11px;
animation-delay: .2s;

}
#preloader_1 span:nth-child(3){
left:22px;
animation-delay: .4s;
}
#preloader_1 span:nth-child(4){
left:33px;
animation-delay: .6s;
}
#preloader_1 span:nth-child(5){
left:44px;
animation-delay: .8s;
}
@keyframes preloader_1 {
0% {height:5px;transform:translateY(0px);background:blue;}
25% {height:30px;transform:translateY(15px);background:maroon;}
50% {height:5px;transform:translateY(0px);background:blue;}
100% {height:5px;transform:translateY(0px);background:maroon;}
}

#DEMO

One thought on “Pure CSS3 Pre-Loader

  • August 23, 2017 at 12:07 am
    Permalink

    I have noticed that your blog needs some fresh content.

    Writing manually takes a lot of time, but there is tool for this boring task, search for: unlimited content Wrastain’s tools

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Pin It on Pinterest