How to create Loading / Progress bar Animation using HTML and CSS with Source Code for free.
Here is the Preview of Progress/Loading -
Here is the HTML code for progress bar
progressbar.html
<!DOCTYPE html>
<html>
<head>
<title>Loading Animation</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
<link rel="stylesheet" type="text/css" href="progressbar.css">
</head>
<body>
<div class="mn-load-cntnr" >
<ul class="ul" >
<li class="li"></li>
<li class="li"></li>
<li class="li"></li>
<li class="li"></li>
<li class="li"></li>
<li class="li"></li>
<li class="li"></li>
<li class="li"></li>
<li class="li"></li>
<li class="li"></li>
<li class="li"></li>
<li class="li"></li>
<li class="li"></li>
<li class="li"></li>
<li class="li"></li>
<li class="li"></li>
</ul>
</div>
</body>
</html>
Here is the CSS code for progress design and animation
progressbar.css
body {
margin:0;
padding:0;
background:#212121;
}
.mn-load-cntnr {
// position:fixed;
position:relative;
// width:100%;
// height:100%;
width:auto;
height:200px;
// background: ;
background:#212121;
overflow:hidden;
}
.ul {
text-align:center;
margin:0;
padding:0;
position:absolute;
top:50%;
left:50%;
border-radius:15px;
padding-left:20px;
padding-right:20px;
transform:translate(-50%, -50%);
display:flex;
}
.ul .li {
list-style:none;
width:4px;
height:30px;
margin-left:2px;
background:#fff;
border-radius:5px;
animation:animate 1.6s ease-in-out infinite;
}
@keyframes animate {
0%, 40%, 100%
{
transform:scale(0.5);
}
20%
{
transform:scale(1.1);
}
}
.ul .li:nth-child(1) {
animation-delay:-1.4s;
background:#00FF00;
box-shadow:0 0 10px #00FF00;
}
.ul .li:nth-child(2) {
animation-delay:-1.3s;
background:#00FF00;
box-shadow:0 0 10px #00FF00;
}
.ul .li:nth-child(3) {
animation-delay:-1.2s;
background:#00FF00;
box-shadow:0 0 10px #00FF00;
}
.ul .li:nth-child(4) {
animation-delay:-1.1s;
background:#00FF00;
box-shadow:0 0 10px #00FF00;
}
.ul .li:nth-child(5) {
animation-delay:-1.0s;
background:#00FF00;
box-shadow:0 0 10px #00FF00;
}
.ul .li:nth-child(6) {
animation-delay:-0.9s;
background:#00FF00;
box-shadow:0 0 10px #00FF00;
}
.ul .li:nth-child(7) {
animation-delay:-0.8s;
background:#00FF00;
box-shadow:0 0 10px #00FF00;
}
.ul .li:nth-child(8) {
animation-delay:-0.7s;
background:#00FF00;
box-shadow:0 0 10px #00FF00;
}
.ul .li:nth-child(9) {
animation-delay:-0.6s;
background:#00FF00;
box-shadow:0 0 10px #00FF00;
}
.ul .li:nth-child(10) {
animation-delay:-0.5s;
background:#00FF00;
box-shadow:0 0 10px #00FF00;
}
.ul .li:nth-child(11) {
animation-delay:-0.4s;
background:#00FF00;
box-shadow:0 0 10px #00FF00;
}
.ul .li:nth-child(12) {
animation-delay:-0.3s;
background:#00FF00;
box-shadow:0 0 10px #00FF00;
}
.ul .li:nth-child(13) {
animation-delay:-0.2s;
background:#00FF00;
box-shadow:0 0 10px #00FF00;
}
.ul .li:nth-child(14) {
animation-delay:-0.1s;
background:#00FF00;
box-shadow:0 0 10px #00FF00;
}
.ul .li:nth-child(15) {
animation-delay:0.1s;
background:#00FF00;
box-shadow:0 0 10px #00FF00;
}
.ul .li:nth-child(16) {
animation-delay:0.2s;
background:#00FF00;
box-shadow:0 0 10px #00FF00;
}
