Feedback & status / CSS
Loading dots
A compact status indicator with staggered, motion-safe dots.
Preparing the component workbench…
Feedback & status / CSS
A compact status indicator with staggered, motion-safe dots.
SOURCE / REACT · provisional
import LoadingDots from "@/components/buildwithme/loading-dots/react";
<LoadingDots />// Adapted from https://github.com/vercel/examples/blob/main/internal/packages/ui/src/loading-dots.tsx under MIT. Copyright (c) Vercel, Inc..
'use client';
import { useAnimation } from './use-animation';
import './base.css';
import './loading-dots.css';
export default function LoadingDots({
label = 'Loading dots',
paused = false,
}: {
label?: string;
paused?: boolean;
}) {
const { ref, active } = useAnimation(paused);
return (
<div ref={ref} className="bw-demo" data-active={active}>
<span className="adapt-loading" role="status">
<span className="bw-sr-only">{label}</span>
<i />
<i />
<i />
</span>
</div>
);
}
Install the registry item to receive all 7 files and their declared dependencies. Copying one file may require the other files shown here.