Loader generator

Create animated loaders and generate production React code

2 followers

Create animated loaders and generate production React code

2 followers

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.

Launch tags:Web App•Design Tools•Prototyping

Launch Team

Framer AI AgentsDesign and publish professional sites with AI

Promoted

Vidjet

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

Report

6yr ago

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.

Report

6yr ago

Vidjet

@viktor_renkema thanks :) Good luck with that!

Report

6yr ago

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 :)

Report

6yr ago

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!

Report

6yr ago

Invoicer Studio

Maker

@christian_piponides Thanks, this is really useful!

Report

6yr ago

How to save the gif?

Report

6yr ago

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.

Report

6yr ago