Loader Blur Animation

Introduction of Blur loading effect

Here today we are going to create a Blur Loading Effect with our new creativity by applying the blur effect with the help of following the simple and easy code of HTML and CSS step by step to understand it carefully. In this loading, you will see a text loading that will be written on a page, and each text will get blurred, and that effect will proceed from the text “L” to the text “G,” and that will be repeated until the loading not completed successfully.

Now let’s start making this project together without wasting time by doing the simple and easy code of HTML and CSS step by step. You just have to focus on it. This is a very useful project, as you have already seen the loader on almost all the websites to load something, so you can also use it on your website by making such a loader with your new creativity by taking ideas from here.

HTML (Hypertext Markup Language)

First, we will create the structure of this Blur Loading Effect with the help of HTML (HHyper Text Markup Language). This is used to make the structure of a web page by writing their code. The response will be shown on the Chrome page. In this, we will first give the title of the page. Then make the internal structure of the page, in which we will make a parent div in which all the content of the loader will be written. We will make a child div in which we will write all the characters of loading in span tags. Every character will be in every individual span tag, so we will have to make separate tags for all the characters of loading so that the animation will apply to all in different time gaps.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Loader blur animation</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="loading">
        <div class="loading-text">
            <span class="loading-text-words">L</span>
            <span class="loading-text-words">O</span>
            <span class="loading-text-words">A</span>
            <span class="loading-text-words">D</span>
            <span class="loading-text-words">I</span>
            <span class="loading-text-words">N</span>
            <span class="loading-text-words">G</span>
        </div>
    </div>
</body>
</html>

CSS

After making the structure of the loading web page. We will now give it some styling with the help of CSS (CCascading Style Sheet). Which is very useful for designing and makes the look of the website better than before (this is attached to the html file in the link tag). In this, we will first make the background black, and then we will move toward the main content of loading.

In this, we will first take the parent div of the Blur Loading Effect to the center of the screen. Then we will give the display property to the child div of the parent div. In which all the span tags are, so that all the span tags can come in one row. Then we will give the styling to the character of the loader, like text color, font size, etc..

@import url(https://fonts.googleapis.com/css?family=Quattrocento+Sans);
.loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  z-index: 9999;
}

.loading-text {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
  width: 100%;
  height: 100px;
  line-height: 100px;
}
.loading-text span {
  display: inline-block;
  margin: 0 5px;
  color: #fff;
  font-family: "Quattrocento Sans", sans-serif;
}
.loading-text span:nth-child(1) {
  filter: blur(0px);
  -webkit-animation: blur-text 1.5s 0s infinite linear alternate;
          animation: blur-text 1.5s 0s infinite linear alternate;
}
.loading-text span:nth-child(2) {
  filter: blur(0px);
  -webkit-animation: blur-text 1.5s 0.2s infinite linear alternate;
          animation: blur-text 1.5s 0.2s infinite linear alternate;
}
.loading-text span:nth-child(3) {
  filter: blur(0px);
  -webkit-animation: blur-text 1.5s 0.4s infinite linear alternate;
          animation: blur-text 1.5s 0.4s infinite linear alternate;
}
.loading-text span:nth-child(4) {
  filter: blur(0px);
  -webkit-animation: blur-text 1.5s 0.6s infinite linear alternate;
          animation: blur-text 1.5s 0.6s infinite linear alternate;
}
.loading-text span:nth-child(5) {
  filter: blur(0px);
  -webkit-animation: blur-text 1.5s 0.8s infinite linear alternate;
          animation: blur-text 1.5s 0.8s infinite linear alternate;
}
.loading-text span:nth-child(6) {
  filter: blur(0px);
  -webkit-animation: blur-text 1.5s 1s infinite linear alternate;
          animation: blur-text 1.5s 1s infinite linear alternate;
}
.loading-text span:nth-child(7) {
  filter: blur(0px);
  -webkit-animation: blur-text 1.5s 1.2s infinite linear alternate;
          animation: blur-text 1.5s 1.2s infinite linear alternate;
}

@-webkit-keyframes blur-text {
  0% {
    filter: blur(0px);
  }
  100% {
    filter: blur(4px);
  }
}

@keyframes blur-text {
  0% {
    filter: blur(0px);
  }
  100% {
    filter: blur(4px);
  }
}

Now we will give animation to the character so that they can get the blurring effect. In which case we will apply the @ keyframe property in CSS (tthis is used to give animation to the web page). In this, we will give the filter blur effect to the text of all the characters. Set the times that are different for all the characters. The name of the animation will be written in the CSS tag of the child div in which all the span tags were written.

Output of Blur loading effect

Finally, we made the Blur Loading Effect by just following the simple code of HTML and CSS step by step. If you still have any doubt. You can contact us by clicking on the link in the footer of the webpage. If you want the source code, click on the button given below to download it.

For more explanation, click on the link given below to watch the video.

You can also check: