Forums

Bluxart

Hello guys, this time i wanted to create 3 simple CSS3 Loading Animations. I remember that CSS3 Loading Animations are only visible in Firefox, Safari and Chrome.

In the link below you will find the demo and also the explanation in the details! I hope you like it!

This is the DEMO

I would love to hear your opinions about this!

Cheers, Alessio!

thomas

I think it's a nice concept, but I don't care for the extra HTML markup involved. I know it defeats the purpose of a CSS loader, but I think canvas or animated GIFs would be better choices.

Maybe if you could create the loaders with pseudo-elements...

Hompimpa

Wow, very nice. But I am more accustomed to using css animation to create the effect of softening the appearance of elements, like this:

@keyframes myfirst
{
from{opacity:0;}
to{opacity:1;}
}

@-moz-keyframes myfirst
{
from{opacity:0;}
to{opacity:1;}
}

@-webkit-keyframes myfirst
{
from{opacity:0;}
to{opacity:1;}
}

@keyframes taufik
{
from{transform:translate(0px, 9000px)}
to{transform:translate(0px, 0px)}
}

@-moz-keyframes taufik
{
from{-moz-transform:translate(0px, 9000px)}
to{-moz-transform:translate(0px, 0px)}
}

@-webkit-keyframes taufik
{
from{-webkit-transform:translate(0px, 9000px)}
to{-webkit-transform:translate(0px, 0px)}
}


#outer-wrapper{animation: myfirst 2s;-moz-animation: myfirst 2s;-webkit-animation: myfirst 2s;}
#main-wrapper{animation: myfirst 3s;-moz-animation: myfirst 3s;-webkit-animation: myfirst 3s;}
h1,h2,h3,#sidebar-wrap{animation: myfirst 4s;-moz-animation: myfirst 4s;-webkit-animation: myfirst 4s;}

You can see the effect on my blogspot site