Hello reader's, we all have seen preloaders whenever we visit any website, at the loading time it appears at the window panel. I have just tried to create a preloader using bright colours with a punch of animation over it which therefore seems to look beautiful.I hope you all will like it.
In my example, I have taken a div loader-wrapper by setting its position fixed and had set the height and width according to the requirement. Below I have taken a div loader basically comprising of spinning elements along with some animation.
I have also used CSS selectors (before) and (after) that helps to insert something before and after the content of each selected elements using the content property that specifies the content that is to be inserted.
Below is the html code:-
<!DOCTYPE html>
<html>
<head>
<title>Spinning Preloader</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="container">
<h1 style="color:#fff; text-align:center;">Spinning Preloader</h1>
<div class="loader-wrapper">
<div class="loader"></div>
</div>
</div>
</body>
</html>
Below is the CSS code:-
body{
background-color: #000000;
}
h1{
font-size: 52px;
font-weight: 500;
}
.loader-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 85%;
z-index: 1000;
}
.loader {
display: block;
position: relative;
left: 50%;
top: 50%;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
border: 3px solid #3498db;
border-color: #3498db transparent transparent;
border-radius: 50%;
z-index: 1500;
-webkit-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}
.loader:before {
content: "";
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
border: 3px solid #e74c3c;
border-radius: 50%;
border-color: #e74c3c transparent transparent;
-webkit-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
animation: spin 3s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}
.loader:after {
content: "";
position: absolute;
top: 15px;
left: 15px;
right: 15px;
bottom: 15px;
border: 3px solid #f9c922;
border-radius: 50%;
border-color: #f9c922 transparent transparent;
-webkit-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
animation: spin 1.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg); /* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: rotate(0deg); /* IE 9 */
transform: rotate(0deg); /* Firefox 16+, IE 10+, Opera */
}
100% {
-webkit-transform: rotate(360deg); /* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: rotate(360deg); /* IE 9 */
transform: rotate(360deg); /* Firefox 16+, IE 10+, Opera */
}
}
@keyframes spin {
0% {
-webkit-transform: rotate(0deg); /* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: rotate(0deg); /* IE 9 */
transform: rotate(0deg); /* Firefox 16+, IE 10+, Opera */
}
100% {
-webkit-transform: rotate(360deg); /* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: rotate(360deg); /* IE 9 */
transform: rotate(360deg); /* Firefox 16+, IE 10+, Opera */
}
}
In the CSS code, I have given the loader-wrapper and loader a very high z-index which specifies the stack order of the element and therefore a high z-index will make the content appear on top. To make the loader appear in the middle of the screen , I have set the margin negative from top and left .
In my example, I have also used CSS3 psuedo elements (:before and :after) and setting their to absolute.To the nested squares , I have set the all the directions such as right , left , top , bottom to offset.
To make all squares turn into lines we will set boder-top-color and remaining sides to transparent. Now to make the lines look circle we simply set the border-radius to 50%.
Now, for the animation part I have used @keyframes rule that specifies the animation code for the particular element that need to be aniamted . In my example I have used 2 keyframes to rotate each line to 360 degrees with the spin property.
I have set the animation property to loader class , :before and :after with different time- duration , iteration-count to infinite and animation-timing-function to linear.
Conclusion:-
Hence, a spinning preloader is created using CSS3 , animation and HTML5 elements.
Note:-The following example will run on the latest version browsers efficiently such as on Safari 3.2+, Chrome, Firefox 4+, Opera 10.5+, and IE 10 .
0 Comment(s)