CSS Bar Loader - Example 1

The below code will create a simple bar loader that is 100% wide, 20 pixels tall, and light grey in color. The loading bar is created using a pseudo-element (::after) that animates from 0% width to 100% width over a 4-second period. You can customize the loader by adjusting the width, height, colors, and animation duration to suit your needs.

Code:

<!DOCTYPE html>
<html>
<title>Online CSS Editor</title>
<head>
<style>
.loader {
width: 100%;
height: 20px;
background-color: lightgrey;
position: relative;
margin-top: 20px;
}

.loader::after {
content: "";
display: block;
position: absolute;
width: 0%;
height: 100%;
top: 0;
left: 0;
background-color: blue;
animation: loader 4s linear infinite;
}

@keyframes loader {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
</style>
</head>
<body>
<h2>This is an example of CSS Bar Loader</h2>
<div class="loader"></div>
</body>
</html>

CSS Bar Loader - Example 1

Code:

Output: