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.


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>

Output:



0 comments

コメント


bottom of page