This tiny, fast, pure JavaScript solution enables you to display a short, customised animation while your website loads. It is particularly useful for large pages because this quick, low-resource animation entertains users for several seconds. All you need to do is to provide the tool with the SVG image that you want to animate.
To see the animation in action, go to this fiddle where the animation entertains you while a particularly large image loads in the background.
To add intro SVG animation to your website, follow these steps:
- Clone this repository.
- Open the
sourcefolder, and copy thesite-intro-animation.jsfile to your project. - In the
site-intro-animation.jsfile, replace the value of thesvgSourceconstant with the SVG image you want to animate. Surround the SVG code by backticks (`). - Optional: Change the value of the
animationDurationconstant to specify the duration of the animation in milliseconds. - Optional: Change the value of the
animationDurationconstant to specify the background colour of the animation using CSS standards. - In the page of your project where you want to add the animation, enter the following code at the end of the
<body>tag.<script src="site-intro-animation.js"></script>