Loading...

Blog

Part 1: How to Code a Pure CSS3 Preloader with Animations

If you are building a website and are worried about load times, preloaders are a great way to reduce user frustration due to varying load times. There are many different methods for creating preloaders but at Daddy Design we always like to take the most pure and simplistic approach. In part 1 of this tutorial we will teach you how to create a pure CSS3 preloader without images that utilizes CSS3 animations.

Step 1: Create the Base CSS and HTML

In the first step we will set up the foundation for our CSS and HTML. What we are doing here is positioning our loader div to cover the entire screen and hide everything while the site is loading.

CSS

.loader{ 
display: block; 
position: fixed; 
top: 0; 
left: 0; 
right: 0; 
bottom: 0; 
background: #000; 
text-indent: -9000px; 
z-index: 9; 
}

HTML

<div class="loader">Loading...</div>

Items to Note:

  • If you want to change the color, adjust the background attribute.
  • If you are not fully hiding all elements then you may need to increase the z-index attribute to a higher number.

Step 2: Create the Pseudo Preloader Element

In the next step we will use the CSS pseudo element “::before” to create our actual preloader and begin to set up our CSS3 animation.

CSS

.loader::before {
content: '';
height: 40px;
width: 40px;
position: absolute;
left: 50%; 
top: 50%; 
margin-top: -20px;
margin-left: -20px;
-webkit-animation: rotation .6s infinite linear;
-moz-animation: rotation .6s infinite linear;
-o-animation: rotation .6s infinite linear;
animation: rotation .6s infinite linear;
border-left: 6px solid rgba(255, 255, 255, .15);
border-right: 6px solid rgba(255, 255, 255, .15);
border-bottom: 6px solid rgba(255, 255, 255, .15);
border-top: 6px solid rgba(255, 255, 255, .8);
border-radius: 100%;
-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box; 
box-sizing: border-box;
}

Items to Note:

  • If you want to increase the size of the actual preloader, be sure to adjust the top and left margins so that the preloader stays centered.
  • To control the speed of the animation adjust the animation elements where you see “.6s”.
  • To change the color of your preloader adjust the border color attributes, the last item in the parenthesis controls the transparency. You may also want to increase the border size if you increased the overall size of your preloader.

Step 3: Finalize the CSS3 Animation

In the last step we will use keyframes to finalize the CSS3 animation by rotating our previously set up pseudo element. After applying this final step your preloader animation should now be working.

CSS

@-webkit-keyframes rotation { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(359deg); } }
@-moz-keyframes rotation { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(359deg); } }
@-o-keyframes rotation { from { -o-transform: rotate(0deg); } to { -o-transform: rotate(359deg); } }
@keyframes rotation { from { transform: rotate(0deg); } to { transform: rotate(359deg); } }

Full Code

CSS

.loader{ 
display: block; 
position: fixed; 
top: 0; 
left: 0; 
right: 0; 
bottom: 0; 
background: #000; 
text-indent: -9000px; 
z-index: 9; 
}
.loader::before {
content: '';
height: 40px;
width: 40px;
position: absolute;
left: 50%; 
top: 50%; 
margin-top: -20px;
margin-left: -20px;
-webkit-animation: rotation .6s infinite linear;
-moz-animation: rotation .6s infinite linear;
-o-animation: rotation .6s infinite linear;
animation: rotation .6s infinite linear;
border-left: 6px solid rgba(255, 255, 255, .15);
border-right: 6px solid rgba(255, 255, 255, .15);
border-bottom: 6px solid rgba(255, 255, 255, .15);
border-top: 6px solid rgba(255, 255, 255, .8);
border-radius: 100%;
-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box; 
box-sizing: border-box;
}
@-webkit-keyframes rotation { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(359deg); } }
@-moz-keyframes rotation { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(359deg); } }
@-o-keyframes rotation { from { -o-transform: rotate(0deg); } to { -o-transform: rotate(359deg); } }
@keyframes rotation { from { transform: rotate(0deg); } to { transform: rotate(359deg); } }

HTML

<div class="loader">Loading...</div>

Part 2: How to Remove your CSS3 Preloader on Page Load using jQuery

In part 2 of this tutorial we will teach you how to remove your newly created CSS3 preloader on page load using Jquery.

Troubleshooting

If you are having problems getting this tutorial to work please reread the tutorial and try again, if you still cannot get it to work please leave us a comment below and we will respond as soon as possible. Please do not email us with problems regarding this tutorial, only comments will be responded to.

Leave a Comment

0 comments

Trackbacks

  1. […] Part 1: How to Code a Pure CSS3 Preloader with Animations […]