A text-based loader where characters collapse to the center, expand into a circular orbit, and animate alongside a progress counter.
Circular Text Loader is a GSAP-powered animation that uses SplitText to break a heading into individual characters. Each character first converges toward the center of the loader, then expands outward along calculated circular positions. Once positioned, the characters orbit smoothly around the center point while a numeric counter animates from 0 to 100. The sequence ends with a staggered disappearance of the characters and a fade-out of the counter. This loader creates a minimal yet sophisticated motion effect suitable for modern interfaces.
npm i gsap @gsap/react
Ideal for splash screens, landing page intros, portfolio websites, and branded loading states where animated typography and motion design enhance perceived performance.
Easy-Intermediate
| Prop | Type | Description |
|---|---|---|
| ease | string | Controls the easing curve used when characters collapse toward the center. |
| duration | number | Duration (in seconds) of the initial character animation that moves text toward the center. |
| stagger | number | Delay between each character's animation start time when converging to the center. |
| direction | string | Defines the origin point of the stagger sequence. |
| orbit speed | number | Controls how long the characters orbit around the center before the loader exits. |
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