Creating Preloader screen with CSS is pretty easy due to added animation to them. CSS also unlock lots of designing opportunity by providing lot of psuedo-elements like :before, :after etc.
Steps required to create css preloader
- A web page (Hypertext Markup Language page)
- Cascading Style Sheet (CSS)
- Additionally, JavaScript can be used for hiding the preloading screen after page completes its loading.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Circle loading</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<div class="overlay">
<div class="loading"></div>
</div>
</body>
</html>CSS
body{
margin: 0;
padding: 0;
font-family: Arial;
}
.overlay{
background: #ffffff;
height: 100vh;
width: 100%;
top: 0;
left: 0;
position: relative;
}
.loading {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 50px;
height: 50px;
border: 10px solid #764237;
border-radius: 50%;
animation: zoom 1s linear infinite alternate-reverse;
}
@keyframes zoom {
0% {
width: 50px;
height: 50px;
border-color: rgba(118, 66, 55, 1);
}
25% {
width: 70px;
height: 70px;
border-color: rgba(118, 66, 55, 0.8);
}
50% {
width: 90px;
height: 90px;
border-color: rgba(118, 66, 55, 0.6);
}
75% {
width: 110px;
height: 110px;
border-color: rgba(118, 66, 55, 0.5);
}
100% {
width: 130px;
height: 130px;
border-color: rgba(118, 66, 55, 0.4);
}
}JavaScript
window.onload = function(){
document.getElementsByClassName("overlay")[0].style.display = "none";
/* [0] <= coz. we are considering overlay class for loader is at index 0 or first position */
};
Comments
Post a Comment