Explore free Loading Bar animations at LottieFiles. Download in Lottie JSON, MP4, and GIF to enhance your design projects with a unique theme.

Free Loading Bar Animations | Download in Lottie JSON, GIF | LottieFiles

https://lottiefiles.com/free-animations/loading-bar

Progress indicators commonly known as spinners, express an unspecified wait time or display the length of a process.

Circular, Linear progress React components - Material UI

https://mui.com/material-ui/react-progress/

Some reference examples: https://lottiefiles.com/free-animations/loading-bar

You could make one that transitions smoothly from 0% -> 50% -> 66% -> 75% -> 80% -> ... . The ratios are 0/1, 1/2, 2/3, 3/4, 4/5 and so on, until your task is complete and it can go to 100%. That way it doesn't just pause at 99% like most do, and it feels continuous

Well my boss has been using a progress bar, I’m on board with the looping animation… I’ll just have to put my point across better

react has an “indefinite” state for their progress bar which you could use. There are also a few looping loading states that mimic a progress bar, such this little animation from the obsidian mobile app

Sort of yeah… I might just go with the looping animation away. It gets the point across

Like a bar that loads up to x% and stays there until y time passes?

Looping is better if “finish” point is unknown. Otherwise, it’d be misleading and confusing. Users may think it’s running into an error. I’m on your side! 💪🏽

Yeah okay I’ll have a look at this along with a looping animation - see what one feels better (and which my boss will choose)

Any one able to give me advice on how to make a progress bar that doesn’t “know” when it’s going to finish? I know I can use a looping animation until it’s done but would prefer a loading bar.

Hmm. Any reason to why you prefer a bar over a looping animation?

I’ve looked at using this (with the indeterminate prop): https://mui.com/material-ui/react-progress/

Posts