Loading Animation with HTML and CSS

Loading Animation

Hello friends, in this blog, you will learn how to create Loading Animation using only HTML, CSS.I have shared another snippet based on animation how to create Rotating Words with HTML and CSS. In this tutorial, I have created a Loading Animation using HTML and CSS, If you like this article, please also subscribe my YouTube channel - Code Info

CSS Animation:

An animation we could an element steadily alternate from one style to every other. You can change as many css residences you want, as usually as you need. To apply css animation, you have to first specify some keyframes for the animation. Keyframes preserve what patterns the detail can have at positive instances.

The @keyframes Rule

When you specify CSS styles inside the @keyframes rule, the animation will gradually change from the current style to the new style at certain times. To get an animation to work, you must bind the animation to an element.

Source Code:

If you like this Loading Animation, then feel free to use it in your project. Copy the code by clicking on Copy button provided below.

First, you have to create two files. One of them is HTML, and the other one is CSS. After creating the files, paste the code provided below.

HTML CODE:

<!DOCTYPE html>
<html>
  <head>
    <title>Loading Animation | By Code Info</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="loading-bar">
      <div class="load-section">
        <div class="circle">
          <div class="dot"></div>
        </div>
        <div class="circle">
          <div class="dot"></div>
        </div>
        <div class="circle">
          <div class="dot"></div>
        </div>
        <div class="circle">
          <div class="dot"></div>
        </div>
        <div class="circle">
          <div class="dot"></div>
        </div>
        <div class="circle">
          <div class="dot"></div>
        </div>
        <div class="loading-text">Loading...</div>
      </div>
    </div>
  </body>
</html>

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you have to create a file with .css extension.

CSS CODE:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  background: red;
  min-height: 100vh;
  text-align: center;
  align-items: center;
  justify-content: center;
}

.loading-bar {
  width: 100%;
  display: flex;
  position: relative;
  justify-content: center;
}

.load-section {
  top: -35px;
  position: absolute;
  transform: scale(1.5);
}

.circle {
  width: 1px;
  height: 5px;
  position: absolute;
  animation: rotate 3.5s linear infinite;
}

.circle .dot {
  top: 30px;
  width: 7px;
  height: 7px;
  background: #fff;
  border-radius: 50%;
  position: relative;
}

.loading-text {
  color: #fff;
  bottom: -85px;
  font-size: 25px;
  font-weight: 400;
  margin-left: -50px;
  position: absolute;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

@keyframes rotate {
  30% {
    transform: rotate(220deg);
  }
  40% {
    transform: rotate(450deg);
    opacity: 1;
  }
  75% {
    transform: rotate(720deg);
    opacity: 1;
  }
  76% {
    opacity: 0;
  }
  100% {
    opacity: 0;
    transform: rotate(0deg);
  }
}
.circle:nth-child(1) {
  animation-delay: 0.15s;
}
.circle:nth-child(2) {
  animation-delay: 0.3s;
}

.circle:nth-child(3) {
  animation-delay: 0.45s;
}

.circle:nth-child(4) {
  animation-delay: 0.6s;
}

.circle:nth-child(5) {
  animation-delay: 0.75s;
}

.circle:nth-child(6) {
  animation-delay: 0.9s;
}

I hope you liked this snippet. If so, please share the blog and follow us in our social media profiles and stay connected with this blog. Thank you for visiting.

CSS Animation:

The @keyframes Rule

You may like this:

Source Code:

Post a Comment

Post a Comment

About Us

Contact Form