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>
<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)}
}
{
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
download source file