<img height="1" width="1" style="display:none;" alt="" src="https://px.ads.linkedin.com/collect/?pid=299788&amp;fmt=gif">

Quick and Easy Page Loading Overlay with CSS Spinner – Part 2

User Experience, Software Solutions

By David Wierbiki

In part one of this post I gave a quick and dirty page overlay with an animated gif spinner to get by in a pinch. Now I'm going to show the CSS animated spinner in place of the animated gif spinner.

The Why

Why replace the animated gif spinner with a CSS animated one you ask? It means one less thing to load into the browser. Since we needed the overlay due to slow loading to begin with, it makes perfect sense to not add to the dilemma we were solving.
The overlay loads instantly and so should the animation since it may only be displayed for a few seconds. Using CSS animation will prevent the possibility of this being displayed as the browser tries to load it for the first time.

The What

Getting started with CSS animation could be daunting or scary to the uninitiated or timid, but there are a few good starting places:

There are many CSS spinner copy/paste sites out there with a variety of styles to choose from. Here are a couple to get you started down the CSS animation path:

The How

Replace your CSS & HTML from part one with this:

&amp;lt;style&amp;gt;
#overlay {
background: #ffffff;
color: #666666;
position: fixed;
height: 100%;
width: 100%;
z-index: 5000;
top: 0;
left: 0;
float: left;
text-align: center;
padding-top: 25%;
}
.spinner {
width: 30px;
height: 30px;
color: #939BA1;
background-color: #333;
margin: 0 auto 12px auto;
-webkit-animation: rotateplane 1.2s infinite ease-in-out;
animation: rotateplane 1.2s infinite ease-in-out;
}
@-webkit-keyframes rotateplane {
0% { -webkit-transform: perspective(120px) }
50% { -webkit-transform: perspective(120px) rotateY(180deg) }
100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) }
}
@keyframes rotateplane {
0% {
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
} 50% {
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
} 100% {
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
}
}
&amp;lt;/style&amp;gt;
&amp;lt;div id=&amp;quot;overlay&amp;quot;&amp;gt;
&amp;lt;div class=&amp;quot;spinner&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;
Loading...
&amp;lt;/div&amp;gt;

 

Conclusion

I hope this helped you through a pinch and helps send you down the right path for using CSS animations in your day-to-day design.

Managing JIRA at Scale White Paper

TAGS: User Experience, Software Solutions

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Subscribe to Our Newsletter

Recent Blog Posts