Tutorials

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">
  </div>
</div>

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 */
  setTimeout(function(){
      jQuery('.loader').fadeOut('slow');
    },2000);

});

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":{}}

Recently Oxygen builder added option to create your own/3rd party design sets.

You can follow this video tutorial from Oxygen Builder on how to make design sets.

One of the drawbacks here is that it only gives 1-1 connection and you everyone has to use your site key to be able to import the design set.
This process is not very smooth and doesn’t encourage users to buy your design sets.

But with Oxy Transfer Pro you can now export your design set as a zip file and sell the zip file for your design set.
And your end user can import this design set by using the Oxy Transfer Free version.

Disclaimer: We are not in any associated with Oxygen Builder and the video is property of oxygen builder.

Do a page loading animation inside Oxygen Builder

Sell Oxygen Builder Design sets