BACK
BACK
BACK
Loading...

Blog / HowTos /  How to Make Your Custom CSS Loading Page

May 24, 2016 - Cathy

How to Make Your Custom CSS Loading Page

Should You Create a CSS Loading Page?

One thing that frustrates website visitors is waiting for a page to load. To reduce the user’s aggravation you may want to consider a custom CSS loading page. A custom preloading screen can display some kind of graphics which will distract the viewer briefly while waiting for the page to load. You have probably seen examples many times without thinking much about it. How many times have you opened a page online and seen a spinning circle graphic during the few seconds that you wait for a page to actually open? To create loading page technique it uses CSS3 transitions so that when a page begins to load, an animation effect is displayed, and transitions out when the page has finished loading.

 

Steps for Creating a CSS Loading Page

css loading page
The following shows the steps you will take to add CSS3 transitions to an existing CSS3 preloader:

  1. Add HTML and CSS for loading overlay: In the “index.html” is an existing CSS3 preloader “#loader” on a white background. However we want a high contrast between preload screen and the content. To get that contrast add two parts of the preloading screen inside of “#loader‐wrapper”:
<div id="loader‐wrapper">
<div id="loader"></div>
<div class="loader‐section section‐left"></div>
<div class="loader‐section section‐right"></div>
</div>

Then add some CSS into the “css/main.css” , just after the “@keyframes” spin declaration:

#loader‐wrapper .loader‐section {
position: fixed;
top: 0;
width: 51%;
height: 100%;
background: #222222;
z‐index: 1000;
}
#loader‐wrapper .loader‐section.section‐left {
left: 0;
}
#loader‐wrapper .loader‐section.section‐right {
right: 0;
}

Although we now have a full screen dark overlay, it covers our rotating #loader and makes the page title hard to read.

  1. Change the heading color to light grey: Find “#loader” in the stylesheet and add the following style including the “h1” style just below the default p styles:
#loader {
z‐index: 1001; /* anything higher than z‐index: 1000 of .loader‐section*/
}
h1 {
color: #EEEEEE;
}
  1. Add preloader transition: When the body gets a “class .loaded” both preloading screen sections will be moved out of the view using CSS3 transforms. Add the following code to “main.css”
/* Loaded */
.loaded #loader‐wrapper .loader‐section.section‐left {
‐webkit‐transform: translateX(‐100%); /* Chrome, Opera 15+, Safari 3.1+ */
‐ms‐transform: translateX(‐100%); /* IE 9 */
transform: translateX(‐100%); /* Firefox 16+, IE 10+, Opera */
}
.loaded #loader‐wrapper .loader‐section.section‐right {
‐webkit‐transform: translateX(100%); /* Chrome, Opera 15+, Safari 3.1+ */
‐ms‐transform: translateX(100%); /* IE 9 */
transform: translateX(100%); /* Firefox 16+, IE 10+, Opera */
}
  • Fade the preloader out at the same time by adding the following to the stylesheet:
.loaded #loader {
opacity: 0;
}
  • Add “visibility: hidden;” to “#loader‐wrapper” because the “#loader” container is still sitting on top of the content making “#content” not accessible.
.loaded #loader‐wrapper {
visibility: hidden;
}
  1. Fade out the preloader first, by adding CSS3 transitions to “#loader”
.loaded #loader {
opacity: 0;
‐webkit‐transition: all 0.3s ease‐out;
transition: all 0.3s ease‐out;
}
  1. Animate both sides out of a view with a slight 0.3s delay:
.loaded #loader‐wrapper .loader‐section.section‐right,
.loaded #loader‐wrapper .loader‐section.section‐left {
‐webkit‐transition: all 0.3s 0.3s ease‐out;
transition: all 0.3s 0.3s ease‐out;
}
  1. Last animate the whole “#loader‐wrapper” out of the view using “transform: translateY(‐100%)”:
.loaded #loader‐wrapper {
‐webkit‐transform: translateY(‐100%);
‐ms‐transform: translateY(‐100%);
transform: translateY(‐100%);

‐webkit‐transition: all 0.3s 0.6s ease‐out; transition: all 0.3s 0.6s ease‐out; }

That’s all there is to creating an animated preloading screen using CSS3 animations and transitions. The main use to create a loading page like this is to cut down on the frustration your website visitors may feel while waiting for a page to load. By distracting their attention for a second or two a slightly slower loading page won’t be noticed as much. It is especially useful for one page parallax scrolling websites as they don’t take long to become bulky and slow loading times even with everything optimized.

To draw attention to your website you can also try using these CSS text animation effects.

If you need to create a CSS loading page, we can give you a hand!

Request a quote

Attach File

(max file size 5MB; allowed extensions: doc, txt, pdf, docx)

Contact us Request a Quote

Your email address will not be published.

Required fields are marked *

Attach File

(max file size 5MB; allowed extensions: doc, txt, pdf, docx)

subscribe to newsletter

Your email address will not be published.

Required fields are marked *

Ask a Question

Your email address will not be published.

Required fields are marked *

Sorry, this page isn't quite ready yet

redirecting to the old site

5

Mobilunity

cannot account for customer alterations, as the site may reflect changes made after the project was completed.

5