Loading Bar

bar x indeterminate

Indeterminate loading bar with slide animation. From Aceternity.

loaderbarloadingaceternity

Code

loader-bar.tsx

export function LoadingBar() {
  return (
    <div className="h-1 w-full overflow-hidden rounded-full bg-muted">
      <div className="h-full w-1/3 animate-[loadbar_1.5s_ease-in-out_infinite] rounded-full bg-brand" />
    </div>
  );
}
/* CSS: @keyframes loadbar { 0% { margin-left: -33% } 50% { margin-left: 100% } 100% { margin-left: -33% } } */

Use it in another build

Paste the code into a component file, keep your project tokens (background, brand, radius) and it themes itself. Or tell Claude Code: “add the Loading Bar component and wire it to my accent.”