MarovStudio
Back to marketplace

Progress Loader

An indeterminate progress bar

Loadersloaderprogressbarindeterminate
Fullscreen

Loading…

/* Add to globals.css:
@keyframes progress-slide {
  from { transform: translateX(-110%); }
  to { transform: translateX(320%); }
}
*/
export function ProgressLoader() {
  return (
    <div className="w-56" role="status" aria-label="Loading">
      <div className="h-1.5 overflow-hidden rounded-full bg-neutral-800">
        <span className="block h-full w-1/3 rounded-full bg-amber-500 motion-safe:[animation:progress-slide_1.4s_ease-in-out_infinite]" />
      </div>
    </div>
  );
}