In this tutorial we will going to discuss about CSS3 Loader. Loader are useful to show in website when there is no content visible for long time while the content is loading. For making loader i have used CSS3 properties and used different colors. I have used the animation to animate the loader.
Lets have a look in HTML file.
Create a HTML file and make the structure for the loader within div. Take a main div as a container. Inside container we make a div for smaller or larger circle which can rotate.
Here is the index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
</head>
<body>
<!--VERSION ONE -->
<div class='container'>
<div id='xxxxx-large-circle'>
<div class='w3-spin'></div>
</div>
<div id='xxxx-large-circle'>
<div class='w3-spin'></div>
</div>
<div id='xxx-large-circle'>
<div class='w3-spin'></div>
</div>
<div id='xx-large-circle'>
<div class='w3-spin'></div>
</div>
<div id='x-large-circle'>
<div class='w3-spin'></div>
</div>
<div id='large-circle'>
<div class='w3-spin'></div>
</div>
<div id='medium-circle'>
<div class='w3-spin'></div>
</div>
<div id='small-circle'>
<div class='w3-spin'></div>
</div>
<div id='x-small-circle'>
<div class='w3-spin'></div>
</div>
<div id='xx-small-circle'>
<div class='w3-spin'></div>
</div>
<div id='xxx-small-circle'>
<div class='w3-spin'></div>
</div>
<div id='xxxx-small-circle'>
<div class='w3-spin'></div>
</div>
<div id='xxxxx-small-circle'>
<div class='w3-spin'></div>
</div>
</div>
</body>
</html>
Inside the Index file under the header i have used W3 CSS the link is inside head.
CSS :-
We use Css to style our loader. I have used position absolute for managing the div into different positions. For making the div into a circular form i have used border-radius property in CSS with differnt color of borders. The CSS3 allows developers to make rounded corner in their design, without the need of cornered images or use of multiple div. Border-radius property is supported by many latest browsers.
Another property of css3 i have used is animation. Animation is used to make any element into a moving object. It is used for animating the position, color, height and width of element. Each animation must have the property of @Keyframe which is called with the animation property as a name of animation.
Sub-properties
animation-name: define the name of the @keyframe.
animation-duration: It define the length of the time taken by animation.
animation-timing-function: It makes preset acceleration curves such as ease or linear.
animation-delay: It define the time of delay in animation.
animation-direction: It sets the direction of animation. Its default resets on each cycle.
animation-iteration-count: the number of times the animation should be performed.
animation-fill-mode: sets which values are applied before/after the animation.
animation-play-state: It define the pause/play the animation.
*{
background-color:black;
}
.container{
width: 500px;
height:500px;
border:2px solid ;
margin-left:100px;
}
#xxxxx-large-circle .w3-spin{
position:absolute;
width:150px;
height:150px;
border: 4px solid transparent;
border-radius:100%;
border-right-color:orange;
margin-top:337px;
margin-left:475px;
-webkit-animation-duration: 7s; /* Chrome, Safari, Opera */
-webkit-animation-direction:alternate ; /* Chrome, Safari, Opera */
animation-duration: 7s;
animation-direction:alternate ;
}
#xxxx-large-circle .w3-spin{
position:absolute;
width:140px;
height:140px;
border: 4px solid transparent;
border-radius:100%;
border-right-color:red;
margin-top:342px;
margin-left:480px;
-webkit-animation-duration: 6.5s; /* Chrome, Safari, Opera */
-webkit-animation-direction:alternate ; /* Chrome, Safari, Opera */
animation-duration: 6.5s;
animation-direction:alternate ;
}
#xxx-large-circle .w3-spin{
position:absolute;
width:130px;
height:130px;
border: 4px solid transparent;
border-radius:100%;
border-right-color:blue;
margin-top:347px;
margin-left:485px;
-webkit-animation-duration: 6s; /* Chrome, Safari, Opera */
-webkit-animation-direction:alternate ; /* Chrome, Safari, Opera */
animation-duration: 6s;
animation-direction:alternate ;
}
#xx-large-circle .w3-spin{
position:absolute;
width:120px;
height:120px;
border: 4px solid transparent;
border-radius:100%;
border-right-color:#00ffff;
margin-top:352px;
margin-left:490px;
-webkit-animation-duration: 5.5s; /* Chrome, Safari, Opera */
-webkit-animation-direction:alternate ; /* Chrome, Safari, Opera */
animation-duration: 5.5s;
animation-direction:alternate ;
}
#x-large-circle .w3-spin{
position:absolute;
width:110px;
height:110px;
border: 4px solid transparent;
border-radius:100%;
border-right-color:#2ba46a;
margin-top:357px;
margin-left:495px;
-webkit-animation-duration: 5s; /* Chrome, Safari, Opera */
-webkit-animation-direction:alternate ; /* Chrome, Safari, Opera */
animation-duration: 5s;
animation-direction:alternate ;
}
#large-circle .w3-spin{
position:absolute;
width:100px;
height:100px;
border: 4px solid transparent;
border-radius:100%;
border-right-color:#ff0000;
margin-top:362px;
margin-left:500px;
-webkit-animation-duration: 4.5s; /* Chrome, Safari, Opera */
-webkit-animation-direction:alternate ; /* Chrome, Safari, Opera */
animation-duration: 4.5s;
animation-direction:alternate ;
}
#medium-circle .w3-spin{
position:absolute;
width:90px;
height:90px;
border: 3px solid transparent;
border-radius:100%;
border-right-color:#ffbf00;
margin-left:505px;
margin-top:367px;
-webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
-webkit-animation-direction: alternate; /* Chrome, Safari, Opera */
animation-duration: 4s;
animation-direction:alternate;
}
#small-circle .w3-spin{
position:absolute;
width:80px;
height:80px;
border: 3px solid transparent;
border-radius:100%;
border-right-color:#40ff00 ;
margin-left:510px;
margin-top:372px;
-webkit-animation-duration: 3.5s; /* Chrome, Safari, Opera */
-webkit-animation-direction:alternate ; /* Chrome, Safari, Opera */
animation-duration: 3.5s;
animation-direction:alternate ;
}
#x-small-circle .w3-spin{
position:absolute;
width:70px;
height:70px;
border: 3px solid transparent;
border-radius:100%;
border-right-color:#00ff80;
margin-left:515px;
margin-top:377px;
-webkit-animation-duration: 3s; /* Chrome, Safari, Opera */
-webkit-animation-direction: alternate; /* Chrome, Safari, Opera */
animation-duration: 3s;
animation-direction: alternate;
}
#xx-small-circle .w3-spin{
position:absolute;
width:60px;
height:60px;
border: 3px solid transparent;
border-radius:100%;
border-right-color: #00bfff;
margin-left:520px;
margin-top:382px;
-webkit-animation-duration: 2.5s; /* Chrome, Safari, Opera */
-webkit-animation-direction: alternate; /* Chrome, Safari, Opera */
animation-duration: 2.5s;
animation-direction:alternate ;
}
#xxx-small-circle .w3-spin{
position:absolute;
width:50px;
height:50px;
border: 3px solid transparent;
border-radius:100%;
border-right-color:#0000ff;
margin-left:525px;
margin-top:387px;
-webkit-animation-duration: 2s; /* Chrome, Safari, Opera */
-webkit-animation-direction: alternate; /* Chrome, Safari, Opera */
animation-duration: 2s;
animation-direction: alternate;
}
#xxxx-small-circle .w3-spin{
position:absolute;
width:40px;
height:40px;
border: 3px solid transparent;
border-radius:100%;
border-right-color:#8000ff;
margin-left:530px;
margin-top:392px;
-webkit-animation-duration: 1.5s; /* Chrome, Safari, Opera */
-webkit-animation-direction: alternate; /* Chrome, Safari, Opera */
animation-duration: 1.5s;
animation-direction: alternate;
}#xxxxx-small-circle .w3-spin{
position:absolute;
width:30px;
height:30px;
border: 3px solid transparent;
border-radius:100%;
border-right-color: #ff00ff;
margin-left:535px;
margin-top:397px;
-webkit-animation-duration: 1s; /* Chrome, Safari, Opera */
-webkit-animation-direction: alternate; /* Chrome, Safari, Opera */
animation-duration: 1s;
animation-direction:alternate ;
}
With the help of animation and keyframe you can make a rotating loader for the website. Hope this tutorial will be helpful for you.
0 Comment(s)