How To Make Loading Effect In HTML CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PreLoader</title>
</head>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
text-decoration: none;
list-style: none
}
body{
background: #181818;
}
.container{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.loader-bar{
height: 50px;
width: 10px;
background: #3498db;
margin: 0 8px;
border-radius: 10px;
animation: loading 1s ease-in-out infinite;
}
.loader-bar:nth-child(1){
animation-delay: .1s;
}
.loader-bar:nth-child(2){
animation-delay: .2s;
}
.loader-bar:nth-child(3){
animation-delay: .3s;
}
.loader-bar:nth-child(4){
animation-delay: .4s;
}
.loader-bar:nth-child(5){
animation-delay: .5s;
}
.loader-bar:nth-child(6){
animation-delay: .6s;
}
.loader-bar:nth-child(7){
animation-delay: .7s;
}
.loader-bar:nth-child(8){
animation-delay: .9s;
}
@keyframes loading {
0%{
transform: scale(1);
filter: hue-rotate(240deg);
}
20%{
transform: scale(1, 2.5);
/* filter: hue-rotate(-180deg); */
}
40%{
transform: scale(1);
hue-rotate:(180deg);
filter: hue-rotate(180deg);
}
}
</style>
<body>
<div class="container" id="loader">
<div class="loader-bar"></div>
<div class="loader-bar"></div>
<div class="loader-bar"></div>
<div class="loader-bar"></div>
<div class="loader-bar"></div>
<div class="loader-bar"></div>
<div class="loader-bar"></div>
<div class="loader-bar"></div>
</div>
<script>
let a = document.getElementById('loader');
//window.addEventListener('load', () =>{
setTimeout(() => {
a.style.display= 'none'
}, 1500);
});
</script>
</body>
</html>