How to make a loading animation in web

Question

I want to make loading bars. But I can't find out how to do it.

Answer 1

There are more than enough tutorials on the web, just look it up, e.g.

https://www.w3schools.com/howto/howto_css_loader.asp

https://www.freecodecamp.org/news/how-to-build-a-delightful-loading-screen-in-5-minutes-847991da509f/

https://codeburst.io/how-to-create-a-beautiful-animated-loader-with-nothing-but-css-d1962fc5a66c

Some knowledge of HTML and CSS might be useful, but those tutorial should guide you step by step. Also, you can find a lot of reference codes here, just go to the Code Playground and search for "load", here are just some examples:
https://code.sololearn.com/W3hqElGB2x1r/?ref=app
https://code.sololearn.com/WvBTjRsrTkjQ/?ref=app
https://code.sololearn.com/W0yhMsosjDyD/?ref=app
https://code.sololearn.com/WfH0orOp6HIV/?ref=app
https://code.sololearn.com/W7RZV0P7Wx3n/?ref=app
https://code.sololearn.com/WRYirFb81LSg/?ref=app

Answer 2

You can create a div and give different border color and different side , then rotate it with keyframes