Loading animation is an essential part of a project. A good loading animation can not only make the UI more friendly, but also relieve the anxiety of users waiting for loading, so as to improve user experience.

At present, there are roughly several methods to realize loading animation for the front end:

  • Insert the GIF image directly
  • The CSS makes loading animations
  • Loading animation in SVG format

In my past project experience, I have used all of these methods, but each has its own advantages and disadvantages. It is undoubtedly the easiest to insert GIF images directly. However, it is inevitable that images occupy a large space, the replacement cost is high, and loading animations will be delayed when the network is slow, which greatly reduces the user experience. CSS animation design space is relatively large, front-end work, because it is CSS code implementation, so take up little space, and fluency and experience are very good; SVG is so flexible in drawing paths that it’s easy to animate, and it’s a bit overkill for loading animations.

In my normal projects, I prefer to use the last method. In my opinion, it is the best implementation method. The following is the method to make a simple loading animation for the front-end and use it.

1. Find material

IO is a site that allows you to highly customize your loading, including color, size, speed, etc.

2. Export the file in Base64 format

Find the animation you like and adjust it to the appropriate style. Then you need to export it to SVG format. Note here, because some loading animations need to be charged. We’re on the front end (funny), and you need to:

1. Open the console and click select TAB

2. Select and click the animation you have adjusted

3. Copy the entire SVG tag (note: the copied tag can also be used in a web page, skip all steps)

4. Create an empty. SVG file and paste the copied SVG into it

5. Open online Base64 conversion to convert. SVG files to Base64 encoding

3. Use animations on your web page

There are two ways to use it. One is CSS. One is to reference the IMG tag directly.

.box{ background-image: url("data:image/jpg; base64,/9j/4QMZR..." ); }Copy the code
<img src="data:image/jpg; base64,/9j/4QMZR..." />Copy the code

See the picture below for finished products.