Back

Creating a Dynamic Typing Cursor Animation

Learn how to build a minimalist loading indicator that mimics a typing effect with blinking cursor using CSS animations.

HTML

The HTML structure for our typing cursor loader is elegantly minimal. We have a main container with the class "typing-loader" that houses two elements: a span with the class "typing-text" containing the word "Loading", and a span with the class "cursor" containing the vertical bar character that represents our cursor.

        <div class="typing-loader">
          <span class="typing-text">Loading</span>
          <span class="cursor">|</span>
        </div>

CSS

Let's start by styling our loader container. We use flexbox for alignment and set the font to monospace for that authentic terminal/code editor feel. The slate gray color (#334155) offers good contrast without being too harsh.

        .typing-loader {
            display: flex;
            align-items: center;
            font-family: monospace;
            font-size: 1.5rem;
            color: #334155;
            height: 50px;
        }

For the typing text, we need a few key properties. The overflow: hidden and white-space: nowrap ensure that our text doesn't wrap and is only visible as it "types in" during the animation. Initially, we set the width to 0 so no text is visible. As the animation progresses, we'll increase this width to reveal the text character by character.

        .typing-text {
            overflow: hidden;
            white-space: nowrap;
            border-right: transparent;
            width: 0;
            animation: typing 2s steps(7) infinite;
        }

The cursor element is styled separately with its own blinking animation. We use a thin margin-left to create a small gap between the text and cursor for better readability.

        .cursor {
            display: inline-block;
            margin-left: 1px;
            animation: blink 0.7s steps(1) infinite;
        }

The typing animation controls how our text appears and disappears. We use the steps() timing function to create discrete jumps in the width, making it look like characters are appearing one at a time rather than smoothly. The animation cycle goes from a width of 0 (no visible text) to 7ch (all characters visible), holds there briefly, and then returns to 0 in a continuous loop.

        @keyframes typing {
            0% {
                width: 0;
            }
            50%, 90% {
                width: 7ch;
            }
            100% {
                width: 0;
            }
        }

The blink animation creates the familiar cursor effect by toggling the opacity between 0 and 1 at regular intervals. We use the steps(1) timing function to make this transition abrupt rather than gradual, mimicking the digital on/off nature of a real cursor.

        @keyframes blink {
            0%, 100% {
                opacity: 1;
            }
            50% {
                opacity: 0;
            }
        }

The "ch" unit used in our animation is particularly useful here—it's equal to the width of the "0" character in the current font, making it perfect for monospace fonts where all characters have the same width. By using 7ch as our max width, we ensure exactly enough space for our 7-character "Loading" text. This typing cursor loader offers several unique advantages: - Familiar metaphor: Users immediately recognize the typing/cursor metaphor from their daily computer use, making the loading state intuitive. - Minimalist approach: The design occupies minimal space while clearly communicating an active state. - Tech-savvy aesthetic: The terminal/code editor styling evokes a sense of technology at work, perfect for developer tools, technical applications, or admin interfaces. - Reduced perception of waiting: The active typing animation suggests progress and activity, making wait times feel shorter compared to static indicators. - Easily customizable: The text can be changed to any message appropriate for your context, such as "Processing", "Calculating", or "Connecting". By leveraging this familiar computing metaphor, the typing loader creates a sense of active processing that keeps users engaged while content loads.

Whole code

<div class="typing-loader">
  <span class="typing-text">Loading</span>
  <span class="cursor">|</span>
</div>

<style>
.typing-loader {
  display: flex;
  align-items: center;
  font-family: monospace;
  font-size: 1.5rem;
  color: #334155;
  height: 50px;
}

.typing-text {
  overflow: hidden;
  white-space: nowrap;
  border-right: transparent;
  width: 0;
  animation: typing 2s steps(7) infinite;
}

.cursor {
  display: inline-block;
  margin-left: 1px;
  animation: blink 0.7s steps(1) infinite;
}

@keyframes typing {
  0% {
    width: 0;
  }
  50%, 90% {
    width: 7ch;
  }
  100% {
    width: 0;
  }
}

@keyframes blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
</style>

Creating a Dynamic Typing Cursor Animation

HTML

CSS

Whole code

Comments

More loaders

Similar

See also