Home > Article > Web Front-end > Use CSS to load text animation effects

Use CSS to load text animation effects

王林forward: 2023-08-30 11:21:07940browse

使用 CSS 加载文本动画效果

Nowadays, animation is the most powerful feature in an app to attract more users, it increases user interest in exploring the app. In web applications, we can create animations using HTML and CSS. However, we can create animations using JavaScript, but this will slow down the website.

In this tutorial, we will learn to load text animation using HTML and CSS. When getting data from an API or loading a web page, it is important to animate the loading text to make it more attractive.

Example 1

In the example below, we have created the "loader" div and "loader-inner" div elements in it. In CSS, we give the loader div a fixed size and animate it using the "rotate" keyframe. We set the animation time to 3 seconds.

Additionally, we set inner rotation keyframes for the loader-inner div element and the position within the loader div element.

In the "Rotation" and "Inner Rotation" keyframes we move the loader from 0 degrees to 360 degrees. Users can observe the spinning loader in the output, with loading text in the middle.

<html>
<head>
   <style>
      .loader {
         width: 100px;
         height: 100px;
         border-radius: 50%;
         border: 6px dotted green;
         position: relative;
         animation: rotation 3s linear infinite;
      }
      .loader-inner {
         position: absolute;
         width: 70px;
         height: 70px;
         border-radius: 50%;
         border-block: 6px solid yellow;
         top: 10px;
         left: 10px;
         animation: rotation-inner 3s linear infinite;
      }
      .loader-text {
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
      }
      @keyframes rotation {
         from { transform: rotate(0deg);}
         to { transform: rotate(360deg);}
      }
      @keyframes rotation-inner {
         from { transform: rotate(0deg);}
         to {transform: rotate(360deg);}
      }
   </style>
</head>
<body>
   <h2>Creating the <i> Loading text animation using the CSS </i></h2>
   <div class = "loader">
      <div class = "loader-inner"> </div>
      <div class = "loader-text"> Loading </div>
   </div>
</body>
</html>

Example 2

In the example below, we create a loading bar. Here we have created loader div element and bar div element inside it. We have set the size of the loader div element and the animation of the bar element in CSS.

We use "bar-animation" keyframes to animate. In "bar-animation" we change the width of the div element to make it behave like a loading bar.

<html>
<head>
   <style>
      .container { width: 200px; }
      .loader {
         width: 200px;
         height: 15px;
         position: relative;
         overflow: hidden;
         border: 2px solid blue;
         border-radius: 5px;
      }
      .bar {
         width: 0%;
         height: 100%;
         background-color: green;
         animation: bar-animation 5s ease-in-out infinite;
      }
      span {
         font-size: 1.3rem;
         display: flex;
         justify-content: center;
         color: green;
      }
      @keyframes bar-animation {
         0% {width: 0%;}
         50% {width: 100%;}
         100% {width: 0%;}
      }
   </style>
</head>
<body>
   <h2>Creating the <i> Loading text animation using the CSS. </i> </h2>
   <div class = "container">
      <div class = "loader">
         <div class = "bar"> </div>
      </div>
      <span> Loading </span>
   </div>
</body>
</html>

Example 3

In the example below, we create bounce loading text. Here we add each character of the Loading word into a separate div element. After that, we animate all the characters using "animation" keyframes. In the Animation keyframe, we change the vertical position of the character.

In addition, we also use the "n-th-child()" method to access all div elements one by one and set the animation delay. In the output, the user can observe the bouncing loading text.

<html>
<head>
   <style>
      .char {
         font-size: 44px;
         color: blue;
         display: inline-block;
         transition: all 0.9s;
         animation: animate 1.5s infinite;
      }
      .char:nth-child(1) {animation-delay: 0.1s;}
      .char:nth-child(2) {animation-delay: 0.3s;}
      .char:nth-child(3) {animation-delay: 0.4s;}
      .char:nth-child(4) {animation-delay: 0.5s;}
      .char:nth-child(5) {animation-delay: 0.6s;}
      .char:nth-child(6) {animation-delay: 0.8s;}
      .char:nth-child(7) {animation-delay: 0.9s;}
      .char:nth-child(8) {animation-delay: 1s;}
      .char:nth-child(9) {animation-delay: 1.2s;}
      .char:nth-child(10) {animation-delay: 1.4s;}
      @keyframes animate {
         0% {transform: translateY(0);}
         40% {transform: translateY(-20px);}
         100% {transform: translateY(0);}
      }
   </style>
</head>
<body>
   <h2>Creating the <i> Loading text animation using the CSS. </i> </h2>
   <div class="allLetters">
      <div class = "char"> L </div>
      <div class = "char"> o </div>
      <div class = "char"> a </div>
      <div class = "char"> d </div>
      <div class = "char"> i </div>
      <div class = "char"> n </div>
      <div class = "char"> g </div>
      <div class = "char"> . </div>
      <div class = "char"> . </div>
      <div class = "char"> . </div>
   </div>
</body>
</html>

Example 4

In the example below, we add a blur effect on the loading text. Here we add each character of the load word in a separate "span" element. After that, we access each span element one by one using the ‘n-th-child()’ CSS method to add animation. In the span element, we add a "blurred text" animation with a specific amount of animation delay.

In animation keyframes, we apply a blur filter to the text to show a running blur effect on the loaded text.

<html>
<head>
   <style>
      span {font-size: 2rem; color: green;}
      /* adding blur animation effect on each character of loading text one by one */
      span:nth-child(1){animation: blur-text 4s ease-in-out infinite;}
      span:nth-child(2){animation: blur-text 4s ease-in-out infinite 0.3s;}
      span:nth-child(3){animation: blur-text 4s ease-in-out infinite 0.5s;}
      span:nth-child(4){animation: blur-text 4s ease-in-out infinite 0.9s;}
      span:nth-child(5){animation: blur-text 4s ease-in-out infinite 1.3s;}
      span:nth-child(6){animation: blur-text 4s ease-in-out infinite 1.6s;}
      span:nth-child(7){animation: blur-text 4s ease-in-out infinite 2s;}
      @keyframes blur-text {
         0% {filter: blur(0px);}
         50% {filter: blur(4px);}
         100% {filter: blur(0px);}
      }
   </style>
</head>
<body>
   <h2>Creating the <i> Loading text animation using the CSS. </i> </h2>
   <div class = "allLetters">
      <span> L </span>
      <span> O </span>
      <span> A </span>
      <span> D </span>
      <span> I </span>
      <span> N </span>
      <span> G </span>
   </div>
</body>
</html>

Users learned 4 different types of loading animations in this tutorial. In the first example, we create a rotating loading indicator with text. In the second example, we create a loading bar. Additionally, in the third example, we created bounce loading text, and in the last example, we added a blur effect to the text.

The above is the detailed content of Use CSS to load text animation effects. For more information, please follow other related articles on the PHP Chinese website!

Statement：

This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete

Previous article：How to set default values to align content in CSS?Next article：How to set default values to align content in CSS?

See more

Use CSS to load text animation effects

Example 1

Example 2

Example 3

Example 4

Related articles