Build your fast loading animation website

After adding an image to an image block in a classic editor section, double-click the image to open its editor. Then: Click Design, then click Animations. Select an effect from the list to apply to the image and any text.

Designing the preloader Drag a div block from the add panel right into the page body. Add a class and name it preloader. Enable flexbox. Justify and align its children to the center. Adjust the positioning set the position to fixed. Make sure to select full so it fills up the whole viewport. Set a background color.

Loading animation may be defined as a subtype of progress animation, as it informs the user that the process of loading is active. Focus on the animated wait indicator maintains a consistent visual experience and conveys the sense of a performant page load.

In the Custom CSS panel, scroll down until you find the CSS code for the loading animation section. Here, you will upload and implement your custom loading animation using the provided CSS syntax. Remember to save your changes before exiting the panel.

We create a CSS file to give animation effects to our logo and the loader. We link the CSS file to our HTML document with a tag or can place the CSS contents directly in HTML file using tag. Inside the div tag, insert the logo using the tag, so now our logo appears inside our loader class.

To add the image animations to your Squarespace site, click Edit, then the image, and the pencil icon that appear. In the popup, go to Design and lastly Animations. Note: Image animations is only supported in Classic Editor and blog posts, not in Fluid Engine.

Add CSS Add @keyframes with the name slideInLeft and use 0% and 100% as a starting point and ending point of the animation, respectively. Use the animation property on the and specify its background and padding. Style the element by setting the margin to 0 and specifying the font-family.