Loading

1<Spinner variant="braille" /> {/* default */}
2<Spinner variant="line" />
3<Spinner variant="block" />
4<Spinner variant="dots" />

1<Spinner size="sm" />
2<Spinner size="md" />
3<Spinner size="lg" />

1<div className="space-y-2 w-full">
2  <Skeleton variant="text" />
3  <Skeleton variant="text" className="w-3/4" />
4  <Skeleton variant="text" className="w-1/2" />
5</div>

1<div className="flex items-center gap-4">
2  <Skeleton variant="circular" className="h-12 w-12" />
3  <Skeleton variant="circular" className="h-16 w-16" />
4  <Skeleton variant="circular" className="h-20 w-20" />
5</div>

1<div className="space-y-4 w-full">
2  <Skeleton variant="rectangular" className="h-32 w-full" />
3  <Skeleton variant="rectangular" className="h-48 w-full" />
4</div>

1<LoadingContainer>
2  Loading your content...
3</LoadingContainer>

1const [loading, setLoading] = useState(false);
2
3const handleClick = () => {
4  setLoading(true);
5  setTimeout(() => setLoading(false), 2000);
6};
7
8<LoadingButton
9  loading={loading}
10  onClick={handleClick}
11  loadingText="Saving..."
12>
13  Save Changes
14</LoadingButton>