Free Lottie Progress Bar Generator

Create beautiful animated loaders and progress indicators. Customize colors, speed, and style – export as Lottie JSON or CSS.

100% Free No Registration Instant Download

1. Choose loader type

2. Customize style

4px

3. Export

Live Preview

Background:

Type

Spinner

Size

48px

Duration

1s

Why Generate with Us

Create Professional Loading Animations in Seconds

Design beautiful, customizable loaders that match your brand – export as Lottie JSON or pure CSS.

4 Loader Styles

Choose from spinner, dots, linear bar, and circular progress. Each style is fully customizable and optimized for smooth performance.

Custom Brand Colors

Match your brand perfectly with primary and secondary color pickers. Use any hex code or choose from the color palette.

Lottie JSON & CSS Export

Download as Lottie JSON for advanced animation control or copy pure CSS for zero-dependency implementation.

Ultra Lightweight

Generated loaders are under 2KB and use GPU-accelerated CSS transforms. No external library needed for CSS exports.

Animation Speed Control

Adjust animation timing with slow, normal, and fast presets. Fine-tune the perfect rhythm for your loading states.

Flexible Sizing

Choose from 24px to 64px presets or scale freely with CSS. Vector-based designs look crisp at any size.

Real-Time Live Preview

See your changes instantly with the live preview panel. Toggle between light, dark, and transparent backgrounds. Test your loader in context before exporting.

🌑
☀️
🔲
FAQ

Frequently Asked Questions

Everything you need to know about creating and using animated loaders.

1 What's the difference between Lottie and CSS export?

Lottie JSON offers advanced animation control, programmatic updates, and works with the lottie-web library. CSS export is pure CSS with no dependencies – just copy and paste into your stylesheet.

2 Are the generated loaders royalty-free?

Yes! All loaders you create are 100% royalty-free. Use them in personal or commercial projects without attribution. The generated code is yours to use however you like.

3 Which loader type should I use?

Spinner: Great for button loading states. Dots: Perfect for content loading. Linear: Ideal for file uploads. Circular: Best for progress percentages.

4 How do I use the Lottie JSON file?

Include lottie-web in your project, then use lottie.loadAnimation() with your JSON file. Works with React, Vue, Angular, and vanilla JavaScript.

5 Can I change the animation speed after export?

Yes! For Lottie, use anim.setSpeed(). For CSS, modify the animation-duration property. Both allow post-export customization.

6 Do the CSS loaders work in all browsers?

Yes! The generated CSS uses widely supported properties and works in Chrome, Firefox, Safari, Edge, and Opera. IE11 may show static fallback states.

7 How do I change colors in the dots loader?

Use the Primary color picker to set the dot color. The dots animate with opacity and scale transforms, so the base color stays consistent throughout the animation.

8 Can I create a loader with transparent background?

Absolutely! Both Lottie and CSS exports use transparent backgrounds by default. Preview with the checkerboard background to see how it will look over your content.

Related Lottie Tools

Explore more free tools for your animation workflow.

Color Swapper

Change colors in your Lottie animations with an intuitive visual editor.
Lottie Minifier

Compress your Lottie files by up to 70% without quality loss.
Lottie to GIF

Convert Lottie animations to animated GIF files for universal sharing.