Preloader using css3 without image



Beautifully designed preloader using pure css3 without image, In this tutorial we will code the Pure css preloader for your web contents, made by nitin rana. To create it we will use CSS3 and HTML5.






  Topic: CSS3, HTML 
  Difficulty: Intermediate  
  Estimated completion time: 10 min.

 

Step 1 – HTML Markup

Let’s start creating the HTML markup. Make the div and convert it in a circle using border-radius style property, according to your required size to make preloader.See the given code below...


<div id="up"></div>
<div id="down"></div>

 

Step 2 – CSS Styles


#up
{
width:220px;
height:220px;
border-radius:150px;
background:#fff;
position:absolute;
top:190px;
left:190px;

}

#down
{

width:240px;
height:240px;
border-radius:150px;
background:-moz-linear-gradient(top, #1a82f7,#408080,#F00);
background:-webkit-linear-gradient(top, #1a82f7,#408080,#F00);
background:-o-linear-gradient(top, #1a82f7,#408080,#F00);
position:absolute;
top:180px;
left:180px;
z-index:-1;


transition:all ease-in-out 0.1s;
-moz-animation-iteration-count:infinite;

-moz-animation-timing-function:linear;
-moz-animation-name:disc;
-moz-animation-duration:1s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:linear;
-webkit-animation-name:disc;
-webkit-animation-duration:3s;
-o-animation-iteration-count:infinite;
-o-animation-timing-function:linear;
-o-animation-name:disc;
-o-animation-duration:3s; }

@-moz-keyframes disc 
{
from{transform:rotate(0deg)}
to{transform:rotate(360deg)}
}
@-webkit-keyframes disc

{
from{transform:rotate(0deg)}
to{transform:rotate(360deg)}
}
@-o-keyframes disc

{
from{transform:rotate(0deg)}
to{transform:rotate(360deg)}
}


 

for source file click the below link to download....
download source file

0 comments:

Post a Comment