50 components available

Bars Loader

Name: Bars Loader
Uploaded: 2025-01-05T00:00:00.000Z
Description: A minimalist loading animation using vertical bars with staggered opacity transitions.

January 2025

A minimalist loading animation using vertical bars with staggered opacity transitions.

Source Code

MUI

Tailwind

bars-loader.tsx

1import { Box, keyframes } from '@mui/system';
2
3const BarsLoader = () => {
4  return (
5    <Box
6      sx={{
7        border: '1px solid #c5e2fe',
8        padding: '4px',
9        display: 'flex',
10        gap: '4px',
11      }}
12    >
13      {Array.from({ length: 12 }).map((_, index) => (
14        <Box
15          sx={{
16            width: 10,
17            height: 20,
18            background: '#c5e2fe',
19            animation: `${fillKeyframe} 1s ease-in-out infinite`,
20            animationDelay: `${index * 0.08}s`,
21          }}
22          key={index}
23        />
24      ))}
25    </Box>
26  );
27};
28
29const fillKeyframe = keyframes`
30  0% {
31    opacity: 0.2;
32  }
33
34  50% {
35    opacity: 1;
36  }
37
38  100% {
39    opacity: 0.2;
40  }
41`;
42
43export default BarsLoader;