HomeToolsSettings
Tools
/
Effects

Loader Maker

Design custom loading animations using pure CSS and HTML — no JavaScript libraries needed. Choose between two loader types: array (multiple items like dots or bars) and filled (a progress-bar style). Arrange items in a circle, horizontal row, or vertical column. Fine-tune item count, size, spacing, roundness, scale range, and two independent colors. Add a rotation or fade animation to the whole loader, pick between step and smooth item animations, and control easing, duration, and direction. Start from one of seven built-in presets (classic spinner, bouncing dots, progress bar, and more) or build from scratch. Copy the ready-to-use HTML and CSS when you're done.

Go offline, it still works.

TonniTools is built to run locally in your browser. Since no data ever leaves your device, everything works, even without internet.

Appearance

32
100%
Shape
Loader Type

Array settings

6
6
16
4
1
0.5

Animation

1s
Easing
Direction
Loader Animation
3s
Array Animation
0.6
Loading...