Monday, 31 October 2016

Custom Preloading Screen with CSS and JavaScript

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.
CSS3 spinning preloader
You can view this elegant preloader in action at www.cantinanegrar.itDemo
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(http://3.bp.blogspot.com/-eeBEj1mV36c/WBfY9p-r8gI/AAAAAAAADLk/7IETfdZH3BI21_4g0eLllXV7RMkiXWXHgCK4B/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

Flat Preloaders
Hope this help your... comment if found something interesting on other website

No comments:

Post a Comment

Hit me with a comment!