A fullscreen loading animation where top and bottom bars slide away with staggered motion to reveal the page.
Bar Loader is a GSAP-powered fullscreen loading animation. The screen is divided into two halves, each containing multiple horizontal bars. When the animation starts, the bars in the top half slide upward while the bars in the bottom half slide downward. Both groups animate with a configurable stagger sequence and easing curve, creating a smooth and dynamic reveal effect. This approach is commonly used for page transitions, landing page intros, or branded loading experiences where a visually engaging entrance animation is required.
npm i gsap @gsap/react
Best suited for page preloaders, landing page intros, route transitions, or full-screen loading states where a clean staggered reveal animation enhances the user experience.
Easy-Intermediate
| Prop | Type | Description |
|---|---|---|
| ease | string | Controls the easing curve of the bar animations. |
| duration | number | Total duration (in seconds) for each bar's slide animation. |
| stagger | number | Delay between each bar's animation start time. |
| direction | string | Defines the origin of the stagger sequence. |
These components are designed for developers who have at least an intermediate understanding of React and GSAP. To fully customize, extend, or modify the behavior, familiarity with both libraries is recommended. They are not specifically intended for absolute beginners.
However, beginners can still use them by simply copying and pasting the code, it is already optimized and production-ready out of the box.
© 2026 dropui.design