Awesome Windows-8 Style Loading On Desired Links In Your Webpage

I think that you are using Windows 8. Did you Experience Windows 8 Live On A Blogspot Blog By EXEIdeas, Not then do it now. We used this code there so you can see the live DEMO in more awesome way. Now so you have experienced the loading animation whenever you open an apps or software on windows 8. How it looks like. Just think that how will it look like when you will add this animation on your blog or website links? You site or blog will be attractive more then it is.

So For this purpose, don’t worry, you do not have to use JQuery as you think. It can be done by pure JavaScript or CSS3. Here we did it so first have a look on the below live DEMO and see how its working and looking. After this, have a look on our features of this code then garb the code and spice up you blog or website.

Features:

1.) Simple And Awesome Code.
2.) Pure JavaScript And CSS3.
3.) Easy To Add And Cool In Use.
4.) Windows 8 Style Animation.
5.) Will Show A Loading Text Before Opening A Link.
6.) Link Timing Can Be Set Manually (Default Is 5 sec).
7.) Only On Desired Links.
8.) CrossBrowsers Support.
9.) Work On All Platform.
10.) Fully Customizable.

How To Use?

1.) You Just Have To Add The Below Code Just Before BODY Tag Of Your Blog Or Website.

<style type="text/css">
/*--------------------------------------------------------
Windows 8 Loading DIV
Coded By Muhammad Hassan
Free For Those Who Believe In Sharing
©EXEIdeas International. All Right Reserved.
--------------------------------------------------------*/
.EXE_Hide_DIV {display: none;}
.EXE_Show_DIV {display: block;position: fixed;left: 0;top: 0;width: 100%;height: 100%;background: #2E8DEF;color: #fff;font-size: 180px;text-align: center;line-height: 800px}
.EXE_Show_DIV {-webkit-animation: cssAnimation 0.8s 1 ease;-moz-animation: cssAnimation 0.8s 1 ease;-o-animation: cssAnimation 0.8s 1 ease;}
@-webkit-keyframes cssAnimation {from { -webkit-transform: scaleX(0.1) scaleY(0.1) rotateY(0deg); }to { -webkit-transform: scaleX(1) scaleY(1) rotateY(360deg); }}
@-moz-keyframes cssAnimation {from { -moz-transform: scaleX(0.1) scaleY(0.1) rotateY(0deg); }to { -moz-transform: scaleX(1) scaleY(1) rotateY(360deg); }}
@-o-keyframes cssAnimation {from { -o-transform: scaleX(0.1) scaleY(0.1) rotateY(0deg); }to { -o-transform: scaleX(1) scaleY(1) rotateY(360deg); }}
</style>
<script type='text/javascript'>
// Windows 8 Loading DIV
// Coded By Muhammad Hassan
// Free For Those Who Believe In Sharing
// ©EXEIdeas International. All Right Reserved.
function EXE_Show_Hide_DIV () { event.preventDefault(); var EXE_DIV = document.getElementById("loading").className = "EXE_Show_DIV"; var EXE_WAIT = document.getElementById("EXE_WAIT").href; setTimeout("window.location.href = EXE_WAIT;",5000); }
</script>
<div id="loading" class="EXE_Hide_DIV">Loading...</div>

2.) Now Add The Below Link Where You Want To Show The Loading DIV. You Can Add Unlimited.

<a id="EXE_WAIT" href="http://www.exeideas.net" onclick="EXE_Show_Hide_DIV()">Visit EXEIdeas International</a>

Customization:

1.) Change 5000 With Your Desired Time.
2.) Change Loading… With Your Desired Text.
3.) Add id=”EXE_WAIT” And onclick=”EXE_Show_Hide_DIV()” In Any Link Where You Want To Show Loading DIV.

Last Words:

This is it what we coded and here we are sharing with you. If you liked it then share your vies and also share it with your circles and if you need to knoe more or have a query then feel free to contact us.