How to make custom preloader with Hype-based animation

Hi guys!
Here are a simple trick based at [this post] (Creating a Custom Preloader)

You just need to make a small HTML code modifications.

  1. Insert this code to style section`on page

     	.maxHeight {
     height: 100vh !important;
     width: 100% !important;
     }
    
  2. And this code after body tag

     <div id="cover_hype_container" class ="maxHeight" >
     <!-- loader via iframe code: -->
      <div class ="maxHeight">
     <iframe src="loader.html" width="100%" height="100%" scrolling="no" frameBorder="0">
     </iframe>
    

Of course, you should close div tags.

Thats all. Works great with full with and hight page
.
Complete example below:
cover.zip (532.6 KB)

7 Likes