Loading overlay

Introduction

The Line reveal example creates a dramatic loading animation where a thin vertical line extends from the center of the screen, then expands horizontally to reveal content beneath.

This example uses the animate function and transform utility to create a complex clip-path animation that responds to loading progress.

Get started

The structure has a gallery behind two overlays:

<div class="container">
    <ul class="gallery-container"></ul>
    <div class="black-overlay"></div>
    <div class="pink-overlay"></div>
</div>

The pink overlay will have a clip-path that creates a vertical line revealing the content beneath.