Fill text

Introduction

The Fill text example shows how to create a loading animation where text fills from left to right. This uses useSpring to create smooth progress updates and useTransform to map progress to a clip-path that reveals the text.

The technique stacks two copies of text - a faded background version and a bright version that's progressively revealed.

Get started

Start with two overlapping text elements:

<template>
  <div class="container">
    <div class="text-container">
      <div class="text text-bg" aria-hidden>
        Loading
      </div>
      <div class="text text-fill">
        Loading
      </div>
    </div>
  </div>
</template>

<style>
.text-container {
  position: relative;
}

.text {
  color: #ff0088;
  font-weight: 900;
  font-size: 64px;
}

.text-bg {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.2;
}

.text-fill {
  clip-path: inset(0 100% 0 0);
  will-change: clip-path;
}
</style>