Loaders.io is a simple yet fun tool that allows you to create custom loader components and tweak the animations. It is built upon Framer Motion, an animation library for React. Install the npm package and you can use the generated code in your production app.

Hey! With loaders.io, you can customize and generate your own production-ready Loader component. Loaders.io utilizes Framer Motion’s 11 different easings to pick from. Next to easings, you can also configure the duration of each element within your loader, set its delay, and choose from one of the 3 repeat types. When you fully customized how your Loader should look and animate, loaders.io generates the code for you to use directly in any React app. All you need is a React environment and the framer-motion dependency installed, and you’re good to go. Give it a try and create a unique loader, and let me know if you’re using it anywhere :)

Seems like a simple and nice product @viktor_renkema ! Is there any way this works with a Vue.js environment?

@baptiste_ncls Thanks! Motion, the animation library that powers the loader, is not available for Vue so right now i'm afraid it'd be tricky. If you'd like to track any possible future support for it, you can find the Motion repo here: https://github.com/framer/motion.

@viktor_renkema thanks :) Good luck with that!

What a cool tool, I had fun playing with different parameters! I've added some feedback here over the page if it helps :) Congratulations launching on Product Hunt!

@christian_piponides Thanks, this is really useful!

Loader generator

Create animated loaders and generate production React code

Create animated loaders and generate production React code

Loader generator

Create animated loaders and generate production React code

Create animated loaders and generate production React code

Similar Products

Do you use Loader generator?

Do you use Loader generator?

You might also like