CSS progress bar is a feature in web development that helps to reduce the time it takes to load a website's styling and formatting. CSS Loader can be used to improve website performance and user experience by ensuring that all styling and formatting is loaded before the user interacts with the website.
<div class="loaders-container-00">
<div>
<span class="progress-bar-1"> </span>
</div>
<div>
<span class="progress-bar-2"> </span>
</div>
<div>
<span class="progress-bar-3"> </span>
</div>
<div>
<span class="progress-bar-4"> </span>
</div>
<div>
<span class="progress-bar-5"> </span>
</div>
</div>
.progress-bar-1 {
width: 100%;
height: 4.8px;
display: inline-block;
position: relative;
background: rgba(255, 255, 255, 0.15);
overflow: hidden;
}
.progress-bar-1::after {
content: "";
width: 96px;
height: 4.8px;
background: #fff;
position: absolute;
top: 0;
left: 0;
-webkit-animation: hitZak 1s linear infinite alternate;
animation: hitZak 1s linear infinite alternate;
}
.progress-bar-2 {
width: 100%;
height: 4.8px;
display: inline-block;
position: relative;
background: rgba(255, 255, 255, 0.15);
overflow: hidden;
}
.progress-bar-2::after {
content: "";
width: 192px;
height: 4.8px;
background: #fff;
position: absolute;
top: 0;
left: 0;
-webkit-animation: animloader71 2s linear infinite;
animation: animloader71 2s linear infinite;
}
.progress-bar-3 {
width: 100%;
height: 4.8px;
display: inline-block;
position: relative;
overflow: hidden;
}
.progress-bar-3::after {
content: "";
width: 96px;
height: 4.8px;
background: #fff;
position: absolute;
top: 0;
left: 0;
-webkit-animation: hitZak 0.6s ease-in-out infinite alternate;
animation: hitZak 0.6s ease-in-out infinite alternate;
}
.progress-bar-4 {
width: 100%;
height: 8px;
display: inline-block;
position: relative;
overflow: hidden;
}
.progress-bar-4::before {
content: "";
top: 0;
left: 0;
height: 100%;
width: 100%;
position: absolute;
background-color: rgba(255, 255, 255, 0.15);
background-image: linear-gradient(
45deg,
rgba(0, 0, 0, 0.25) 25%,
transparent 25%,
transparent 50%,
rgba(0, 0, 0, 0.25) 50%,
rgba(0, 0, 0, 0.25) 75%,
transparent 75%,
transparent
);
background-size: 15px 15px;
z-index: 10;
}
.progress-bar-4::after {
content: "";
width: 0%;
height: 100%;
background-color: #fff;
position: absolute;
border-radius: 0 4px 4px 0;
top: 0;
left: 0;
-webkit-animation: animFw 10s ease-in infinite;
animation: animFw 10s ease-in infinite;
}
.progress-bar-5 {
width: 100%;
height: 12px;
display: inline-block;
background-color: #fff;
background-image: linear-gradient(
45deg,
rgba(0, 0, 0, 0.25) 25%,
transparent 25%,
transparent 50%,
rgba(0, 0, 0, 0.25) 50%,
rgba(0, 0, 0, 0.25) 75%,
transparent 75%,
transparent
);
font-size: 30px;
background-size: 1em 1em;
-webkit-animation: barStripe 1s linear infinite;
animation: barStripe 1s linear infinite;
}
@-webkit-keyframes hitZak {
0% {
left: 0;
transform: translateX(-1%);
}
100% {
left: 100%;
transform: translateX(-99%);
}
}
@keyframes hitZak {
0% {
left: 0;
transform: translateX(-1%);
}
100% {
left: 100%;
transform: translateX(-99%);
}
}
@-webkit-keyframes animloader71 {
0% {
left: 0;
transform: translateX(-100%);
}
100% {
left: 100%;
transform: translateX(0%);
}
}
@keyframes animloader71 {
0% {
left: 0;
transform: translateX(-100%);
}
100% {
left: 100%;
transform: translateX(0%);
}
}
@-webkit-keyframes animFw {
0% {
width: 0;
}
100% {
width: 100%;
}
}
@keyframes animFw {
0% {
width: 0;
}
100% {
width: 100%;
}
}
@-webkit-keyframes barStripe {
0% {
background-position: 1em 0;
}
100% {
background-position: 0 0;
}
}
@keyframes barStripe {
0% {
background-position: 1em 0;
}
100% {
background-position: 0 0;
}
}.progress-bar-1 {
width: 100%;
height: 4.8px;
display: inline-block;
position: relative;
background: rgba(255, 255, 255, 0.15);
overflow: hidden;
&::after {
content: "";
width: 96px;
height: 4.8px;
background: #fff;
position: absolute;
top: 0;
left: 0;
-webkit-animation: hitZak 1s linear infinite alternate;
animation: hitZak 1s linear infinite alternate;
}
}
.progress-bar-2 {
width: 100%;
height: 4.8px;
display: inline-block;
position: relative;
background: rgba(255, 255, 255, 0.15);
overflow: hidden;
&::after {
content: "";
width: 192px;
height: 4.8px;
background: #fff;
position: absolute;
top: 0;
left: 0;
-webkit-animation: animloader71 2s linear infinite;
animation: animloader71 2s linear infinite;
}
}
.progress-bar-3 {
width: 100%;
height: 4.8px;
display: inline-block;
position: relative;
overflow: hidden;
&::after {
content: "";
width: 96px;
height: 4.8px;
background: #fff;
position: absolute;
top: 0;
left: 0;
-webkit-animation: hitZak 0.6s ease-in-out infinite alternate;
animation: hitZak 0.6s ease-in-out infinite alternate;
}
}
.progress-bar-4 {
width: 100%;
height: 8px;
display: inline-block;
position: relative;
overflow: hidden;
&::before {
content: "";
top: 0;
left: 0;
height: 100%;
width: 100%;
position: absolute;
background-color: rgba(255, 255, 255, 0.15);
background-image: linear-gradient( 45deg, rgba(0, 0, 0, 0.25) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.25) 50%, rgba(0, 0, 0, 0.25) 75%, transparent 75%, transparent );
background-size: 15px 15px;
z-index: 10;
}
&::after {
content: "";
width: 0%;
height: 100%;
background-color: #fff;
position: absolute;
border-radius: 0 4px 4px 0;
top: 0;
left: 0;
-webkit-animation: animFw 10s ease-in infinite;
animation: animFw 10s ease-in infinite;
}
}
.progress-bar-5 {
width: 100%;
height: 12px;
display: inline-block;
background-color: #fff;
background-image: linear-gradient( 45deg, rgba(0, 0, 0, 0.25) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.25) 50%, rgba(0, 0, 0, 0.25) 75%, transparent 75%, transparent );
font-size: 30px;
background-size: 1em 1em;
-webkit-animation: barStripe 1s linear infinite;
animation: barStripe 1s linear infinite;
}
@-webkit-keyframes hitZak {
0% {
left: 0;
transform: translateX(-1%);
}
100% {
left: 100%;
transform: translateX(-99%);
}
}
@keyframes hitZak {
0% {
left: 0;
transform: translateX(-1%);
}
100% {
left: 100%;
transform: translateX(-99%);
}
}
@-webkit-keyframes animloader71 {
0% {
left: 0;
transform: translateX(-100%);
}
100% {
left: 100%;
transform: translateX(0%);
}
}
@keyframes animloader71 {
0% {
left: 0;
transform: translateX(-100%);
}
100% {
left: 100%;
transform: translateX(0%);
}
}
@-webkit-keyframes animFw {
0% {
width: 0;
}
100% {
width: 100%;
}
}
@keyframes animFw {
0% {
width: 0;
}
100% {
width: 100%;
}
}
@-webkit-keyframes barStripe {
0% {
background-position: 1em 0;
}
100% {
background-position: 0 0;
}
}
@keyframes barStripe {
0% {
background-position: 1em 0;
}
100% {
background-position: 0 0;
}
}