Loader generator

Create animated loaders and generate production React code

2 followers

Visit website
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.
Loader generator gallery image
Loader generator gallery image
Loader generator gallery image
Loader generator gallery image
Launch tags:Web App•Design Tools•Prototyping
Launch Team
Auth0
Auth0
Start building with Auth0 for AI Agents, now generally available.
Promoted

What do you think? …

Viktor Renkema
Invoicer Studio
Maker
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 :)
Baptiste N
Seems like a simple and nice product @viktor_renkema ! Is there any way this works with a Vue.js environment?
Viktor Renkema
Invoicer Studio
Maker
@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.
Baptiste N
@viktor_renkema thanks :) Good luck with that!
Christian Piponides
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!
Viktor Renkema
Invoicer Studio
Maker
@christian_piponides Thanks, this is really useful!
Vlad Korobov
Timestripe
Please put all the templates there
Viktor Renkema
Invoicer Studio
Maker
@vlad_korobov I'm afraid I didn't save them, but feel free to dm me any specific one you were looking to make and I can try recreating them.
xubin, lei
How to save the gif?
Viktor Renkema
Invoicer Studio
Maker
@xubinlei The tool does not offer a way to record, so I'd recommend finding a third party screenrecorder. Windows and Mac both have tools built in that do this, Xbox Game Bar for Windows and Quicktime for Mac.
Alex Papageorge
CEO Short List
❤️ the simplicity of the product/tool. Def going to use soon