Percentile

Build a fullscreen preloader called Percentile.

Compose it on a near-black stage with off-white type, and use only three elements, spaced down the full height at a 7% inset. Top: a small monospace label reading LOADING in uppercase with 0.35em letter-spacing, and a dot at the far right that hard-blinks on a 1.6s step timer. Bottom left: a very large geometric sans number at roughly 30% of the stage's smaller dimension, weight 600, line-height 0.76, tracking -0.05em, tabular figures, with a small muted percent sign sitting beside its baseline. Underneath: a hairline rule pinned across the full width.

Count from 0 to 100 in CSS with no JavaScript. Register an integer custom property with @property, animate it from 0 to 100 over 3.8s on cubic-bezier(0.66, 0, 0.34, 1), and print it with counter-reset plus content: counter() on a pseudo-element. Reach 100 at 86% of the timeline and hold there. Drive the rule off the same duration and easing as scaleX from 0 to 1 with a left transform-origin, so the number and the line can never disagree.

Loop forever. Under prefers-reduced-motion, pause both animations on a mid-count frame rather than removing them.