Learn how to create a nice preloader in this tutorial.
Pre-loaders are a common in today’s website. As users we expect that website to be fast, we don’t like waiting for things. Pre-loaders offer visual feedback to the users when content being loaded, thereby managing expectations and reducing the chance of a user abandoning your website.
Is your web app or project contain a large images or video files? Using preloader will give a chance to let the user wait.
We are going to build a similar preloader found on the CSS Awards Website of The Day created by AQuest Web Agency.
You can view this elegant preloader in action at www.cantinanegrar.it. Demo
Let’s get start with HTML markup first.
1. HTML Markup
<div id="wrapper"> <div class="container"> <!-- Paste this code after body tag --> <div class="loader"></div> <!-- Ends --> </div> </div>
2. CSS Markup
<style> /* Paste this css to your style sheet file or under head tag */ .js #loader { display: block; position: absolute; left: 100px; top: 0; } .loader { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 9999; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXDHAiHPhFPjFt8yTNfS4lzclfY7LalefT3Azc8VHGrq7L_45oJKUc4d-LwTJp7IZFJR6jeR5a8iZJ0o1Y2xEHtOC37dBVFTudZUSWkW3QcjyEz47ACjqgV2i5ykmMEbgPTvonSPJbzoKj/s400/Preloader_10.gif) center no-repeat #fff; opacity: .9; } </style>
For this preloader to run on non javascript enable website add the below code on HTML structure
<html lang="en" class="no-js">
And add below css line
.no-js #loader { display: none; }
Demo Download
Here Is a Collection of CSS3 Animated Pre-loaders
Hit me with a comment!