Text Loader Animation Using Html Css Only

"Text Loader Animation Using Only HTML and CSS" is a captivating approach to enhance your website with eye-catching loading animations. With just HTML and CSS, you can create dynamic text elements that change color as they load, providing an engaging visual experience for your website visitors.

In this animation text color transitions from various directions, such as left, right, top, and bottom, which not only adds a touch of excitement but also informs users that content is being loaded. This straightforward and visually appealing technique ensures that users stay engaged and informed during brief loading periods, enhancing their overall experience on your website.

For gsap animations, you can follow the gsap playlist. You can explore further articles on web development by checking out this list.

01. Html
02. CSS
03. Output
04. Youtube Video

Read Also:

HTML:

Let's begin with the foundational structure of an HTML document, as depicted below.

<!DOCTYPE html>
<html>
  <head>
    <title>Text Loader Animation Using Html Css Only</title>
  </head>
  <body>
    // Content
  </body>
</html>

Now that we have established the basic HTML structure and ensured that all necessary dependencies are included in the HTML document, it is time to proceed with writing the HTML code, which is provided below.

<!DOCTYPE html>
<html>
<head>
  <title>Text Loader Animation | Rustcode</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="font.css">
</head>
<body>

  <div class="loader">
    Loading
  </div>

<script src="script.js"></script>
</body>
</html>

This code sets up the structure for a webpage that can display a text loader animation, style it with CSS only.
The page has a title set to "Text Loader Animation | Rustcode".
It links to two external CSS files for styling: "style.css" and "font.css".
Inside the <body> section, there's a <div> element with the class "loader".
The <div> contains the text "Loading".

Output:

Read Also:

CSS:

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

body {
  background-color: #e2e2e2;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loader {
  font-size: 4rem;
  font-family: 'Berkshire Swash', cursive;
  text-transform: uppercase;
  font-weight: 800;
  background: conic-gradient(
    #2B3A67 0 25%,
    #E84855 25% 50%,
    #f38609 50% 75%,
    #07ea1e 75%
  );
  background-size: 200% 200%;
  animation: textAnimation 3.5s ease-in-out infinite;
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
}

@keyframes textAnimation  {
  25% {
      background-position: 0 100%;
  }

50% {
      background-position: 100% 100%;
  }

75% {
      background-position: 100% 0%;
  }

100% {
      background-position: 0 0;
  }
}

It sets a consistent styling for all HTML elements using the universal selector * by removing margins, and padding, and specifying the box-sizing model.
The body element is styled to have a light gray background color, occupy the entire viewport height (100vh), and center its content both horizontally (justify-content: center) and vertically (align-items: center).
The text with the class "loader" is styled with a large font size, a specific font-family, uppercase text transformation, bold weight, and a unique multi-color gradient background created using conic-gradient. The background is animated with a keyframe animation called "textAnimation" for a continuous, looping effect.
The textAnimation keyframes specify how the gradient background transitions at different points in the animation, creating the appearance of the colors moving through the text.

Output:

Read Also:

Output:

Read Also:

Youtube Video:

We also made a youtube video for "Text Loader Animation Using Html Css Only", if you want to watch demo you can click on below video.

Read Also:

Archive