I am attempting to create a loader in the form of a horizontal line. Here is my HTML code:
<div class="animated yt-loader"></div>
And here is my CSS code:
body {
margin: 0;
}
.animated {
-webkit-animation-duration: 10s;
animation-duration: 10s;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
}
.yt-loader {
-webkit-animation-name: horizontalProgressBar;
animation-name: horizontalProgressBar;
-webkit-animation-timing-function: ease;
animation-timing-function: ease;
background: #ef534e;
height: 3px;
left: 0;
top: 0;
width: 0%;
z-index: 9999;
position:relative;
}
.yt-loader:after{
display: block;
position: absolute;
content:'';
right: 0px;
width: 100px;
height: 100%;
box-shadow: #ef534e 1px 0 6px 1px;
opacity: 0.5;
}
@keyframes horizontalProgressBar
{
0% {width: 0%;}
20% {width: 10%;}
30% {width: 15%;}
40% {width: 18%;}
50% {width: 20%;}
60% {width: 22%;}
100% {width: 100%;}
}
However, I am facing an issue implementing this with actual data loading. I need to introduce some delay or other mechanism so that after 3-4 seconds when the data loads, the line width increases to 100%.