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:

"use client"

function LoadingFillText() {
    return (
        <div className="container">
            <div className="text-container">
                <div className="text text-bg" aria-hidden>
                    Loading
                </div>
                <div className="text text-fill">
                    Loading
                </div>
            </div>
            <StyleSheet />
        </div>
    )
}

function StyleSheet() {
    return (
        <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>
    )
}