Loading Animation with CSS & HTML
It will Show You How to Create loading Animation CSS & HTML.
code is here
<html>
<head>
<title>css-loading-animation</title>
<style>
body{
background-color: #353b48;
}
#loader{
width: 150px;
margin: 150px auto 70px;
}
#loader #loading{
width: 100%;
height: 10px;
border: 1px solid #f5f6fa;
border-radius: 10px;
position: relative;
animation: turn 4s linear infinite;
}
#loader #loading:before{
content: "";
display: block;width: 0%;
height: 100%;
background-color: #f5f6fa;
position: absolute;
animation: load 2s linear infinite;
}
#loader #loading_1{
width: 100%;
color: #f5f6fa;
position: relative;
top: 10px;
}
#loading_1{
font-size: 18px;
text-align: center;
}
@keyframes load{
0%{
width: 0%;
}
87.5%{
width: 100%;
}
}
@keyframes turn{
0%{
transform: rotateY(0deg);
}
6.25% , 50%{
transform: rotateY(180deg);
}
56.25% , 100%{
transform: rotateY(360deg);
}
}
</style>
</head>
<body>
<div id="loader">
<div id="loading">
</div>
<div id="loading_1">
Loading...</div>
</div>
</body>
</html>
Download Here