Fill text

Introduction

The Fill text example shows how to create a loading animation where text fills from left to right. This uses the transform utility to map progress values to clip-path strings, and the animate function with spring physics for smooth transitions.

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:

<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>

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

    .text {
        color: var(--hue-1);
        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>