top of page

How to Create a Loader in CSS

Updated: Mar 18

A loader is a visual indicator that informs the user that content is being loaded.


How to Create a simple Loader

Here's an example of how to create a loader in CSS using keyframe animations:

<!DOCTYPE html>
<html>
<head>
<style>
.loader {
  border: 16px solid #f3f3f3;
  border-top: 16px solid #3498db;
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
  margin: 0 auto;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>
</head>
<body>
<h2>CSS Loader</h2>
<div class="loader"></div>
</body>
</html>


Output:













How to Create a Loader with Multiple Colors

To create a loader with multiple colors in CSS, you can use a combination of CSS gradients and keyframe animations. Here's an example:

<!DOCTYPE html>
<html>
<head>
<style>
.loader {
  border-radius: 50%;
  width: 50px;
  height: 50px;
  position: relative;
  margin: 0 auto;
  animation: spin 1s linear infinite;
}

.loader:before {
  content: "";
  display: block;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(to right, #ff5722, #f44336, #e91e63, #9c27b0, #673ab7, #3f51b5, #2196f3, #03a9f4, #00bcd4, #009688, #4caf50, #8bc34a, #cddc39, #ffeb3b, #ffc107, #ff9800, #ff5722);
  animation: loader-colors 15s linear infinite;
  background-size: 400% 400%;
}

@keyframes loader-colors {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>
</head>
<body>
<h2>CSS Loader</h2>
<div class="loader"></div>
</body>
</html>


Output:



The Tech Platform

www.thetechplatform.com

0 comments
bottom of page