Do a page loading animation inside Oxygen Builder

We see a lot of sites where they have a page load animation effect, especially those beer company sites which would have beer glass animation and then the page load.

The tutorial is going to show you how to achieve something like that with Oxygen Builder.

Step: 1

On your page (homepage) or a page, template add a code block and inside that create an HTML structure for your loader (replace image path to your image)

<div class="loader">
  <div class="loader-wrapper">
    <img src="https://oxycopypaste.test/wp-content/uploads/2020/04/loading.gif" alt="loader">

Step 2:

Let’s do some CSS magic to make the loader show on top of the whole page and have a background and is center aligned. This will go into the css section of the code block.
Change width/height, background color as per your choice.

.loader {
  position: fixed;
  z-index: 1200;
  background-color: #fff;
  width: 100vw;
  height: 100vh;

.loader-wrapper {
  display: flex;
  width: 450px;
  height: 450px;
  margin: 150px auto;
  align-items: center;
  justify-content: center;

.loader-wrapper img {
  max-width: 100%;

Step 3:

Now comes the exciting part of writing our javascript, we would be creating a query on load function to show our loader and then fade it out in 2000 milliseconds, you can adjust this as per your requirement.

jQuery(window).on('load', function() {
  /* loading Timeout */


And that is it, save and check your page that should be working.

This is for if you have a copy paste plugin you can simply copy this into your editor and you will have all the code

{"component":{"id":89,"name":"ct_code_block","options":{"ct_id":89,"ct_parent":0,"selector":"code_block-89-5","original":{"globalConditionsResult":false,"code-php":"<div class=\"loader\">\n  <div class=\"loader-wrapper\">\n    <img src=\"http://oxycopypaste.test/wp-content/uploads/2020/04/loading.gif\" alt=\"loader\" />\n  </div>\n</div>","code-css":".loader {\n  position: fixed;\n  z-index: 1200;\n  width: 100vw;\n  height: 100vh;\n  background-color: #fff;\n}\n\n.loader-wrapper {\n  width: 450px;\n  height: 450px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin: 150px auto;\n}\n\n.loader-wrapper img {\n  max-width: 100%;\n}\n","code-js":"jQuery(window).on('load', function() {\n\tsetTimeout(function(){\n      jQuery('.loader').fadeOut('slow');\n    }, 2600);\n});","conditionspreview":"0"},"activeselector":false,"ct_content":""},"depth":false},"classes":{}}