Simple CSS3 Loader

CSS has really changed a lot over the years and we are now in the era of CSS3. This is the greatest thing that has ever happened in Web Design History. This release is full of lots of great new features the best ones being the following:

CSS3 Transforms – Rotate(), translate(), perspective(), matrix3d(), scale(), skew() etc
CSS3 Animation
CSS3 Filters – grayscale() etc
There are so many other features, I just wanted to highlight my favorites. The era of coding lengthy JavaScript is gone except in some situations. Partnered with HTML5 code and some cool jQuery, your website can be transformed from it’s old monolithic look and feel to a more mordern, youthful and fun site.

So, get into the bandwagon and develop for the future not the past.

Today I’ll show you a Loader that you can use to display before your website or content on your site opens up instead of showing a white/dark background…that’s really boring. The great thing is, it’s all done in simple CSS3 Animation. It’s so simple, that’ll you’ll wonder why you aren’t using it. So here it is:

 

<!DOCTYPE html>
<html>
<head>
<title>CSS Animation</title>
<style>
body{
font-family: “Myriad Pro”;
font-size: 5em;
color: #fff;
background: #000;
}
.content{
margin-top: 30%;
}
.letter {
position: relative;
top: -webkit-calc(50% – 60px);
top: calc(50% – 60px);
text-shadow: 0px 0px 3px white;
}
.letter:nth-child(1) {
-webkit-animation: fade 4s infinite 600ms;
animation: fade 4s infinite 600ms;
}
.letter:nth-child(2) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-animation: fade 4s infinite 400ms;
animation: fade 4s infinite 400ms;
}
.letter:nth-child(3) {
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
transform: scale(1.5);
-webkit-animation: fade 4s infinite 200ms;
animation: fade 4s infinite 200ms;
}
.letter:nth-child(4) {
-webkit-animation: fade 4s infinite 400ms;
animation: fade 4s infinite 400ms;
}
.letter:nth-child(5) {
-webkit-animation: fade 4s infinite 600ms;
animation: fade 4s infinite 600ms;
}

@-webkit-keyframes fade {
50% {
opacity: 0.05;
}
}

@keyframes fade {
50% {
opacity: 0.05;
}
}

</style>
</head>
<body>
<div class = “content” style=”-webkit-perspective: 600px”>
<div class=”box” style=”-webkit-transform-style: preserve-3d; -webkit-transform: rotateY(10deg)”>
<div class=”leaf” style=”-webkit-transform: rotateY(30deg)”>
<center>
<span class = “letter”>D</span>
<span class = “letter”>A</span>
<span class = “letter”>V</span>
<span class = “letter”>I</span>
<span class = “letter”>D</span>
</center>
</div>
</div>
</div>
</div>
</body>
</html>

 

The script fades-in and fades-out each letter alternatively after every 2 seconds while reducing the opacity level at 3 seconds. Some might wonder, “What does ‘ms’ stand for?”. It stands for microsecond that is, Microseconds and it’s the standard if you are writing CSS3 animations. But you can use plain old seconds when writing CSS3 Transforms. An example


.classname{

-webkit-transition: 1s ease;

-moz-transition: 1s ease;

-ms-transition: 1s ease;

-o-transition: 1s ease;

-transition: 1s ease;

}

 

There are other alternatives, not just ‘ease’. There is ease in, ease out and others. Check these CSS3 tutorials on w3schools.com. Subscribe to stay updated on what I’m cooking up on this blog!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s