top of page

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.


<!DOCTYPE html>
<title>Online CSS Editor</title>
.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%;
<h2>This is an example of CSS Bar Loader</h2>
<div class="loader"></div>




bottom of page