Page Load Animation, inspired by Northern Lights concept from Eurovision ‘24
Free Webflow cloneable by Christian Heins

How to customise the Gradient colors

  1. Visit cssgradient.io, create the Gradient that you want to use and click on "Copy to Clickboard".
  2. In this cloneable, find the Code Embed inside the Div "Loading Screen" and replace the text between the opening <style>-tag and the closing </style>-tag with your custom Gradient CSS.
  3. Save the changes, close the Code Embed window & enjoy the loading animation with your Gradient.

How to customise the number of Gradient stripes

  1. Open the Div "Loading Screen"
  2. Add or remove Divs with the class "gradient-colors" until you reached the desired number of Gradient stripes
  3. Open the Interaction Panel, navigate to the page load animation and add newly created Gradient stripes to the animation.

For Feedback on this cloneable send me a message: webflow.com/@christianh.

Your Page Content