How To Add Superhero Pre-Loader In Website

 

Hello freinds,
today i am going to show you how to add Pre-Loader in Website with Two Best example of Pre-Loader animation

Just follow some simple steps to add Pre-Loader in your website

Warning!
Please take an Backup of your theme first.

Please scroll and Check the below given examples of Pre-Loaders. Select one of them and copy the Code/Script of that loader which you like.

Superman Pre-Loader

Demo

Code

Double tap on code to copy !
<style>
     .loadd {
        position: fixed;
        background: #fbff12;
        z-index: 1000;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh
    }
    .body {
        position: absolute;
        top: 50%;
        margin-left: -50px;
        left: 50%;
        animation: speeder .4s linear infinite
    }
    .body > span {
        height: 5px;
        width: 35px;
        background: #000000;
        position: absolute;
        top: -19px;
        left: 60px;
        border-radius: 2px 10px 1px 0
    }
    .base span {
        position: absolute;
        width: 0;
        height: 0;
        border-top: 6px solid transparent;
        border-right: 100px solid #000000;
        border-bottom: 6px solid transparent
    }
    .base span:before {
        content: "";
        height: 22px;
        width: 22px;
        border-radius: 50%;
        background: #000000;
        position: absolute;
        right: -110px;
        top: -16px
    }
    .base span:after {
        content: "";
        position: absolute;
        width: 0;
        height: 0;
        border-top: 0 solid transparent;
        border-right: 55px solid #000000;
        border-bottom: 16px solid transparent;
        top: -16px;
        right: -98px
    }
    .face {
        position: absolute;
        height: 12px;
        width: 20px;
        background: #000000;
        border-radius: 20px 20px 0 0;
        transform: rotate(-40deg);
        right: -125px;
        top: -15px
    }
    .face:after {
        content: "";
        height: 12px;
        width: 12px;
        background: #000000;
        right: 4px;
        top: 7px;
        position: absolute;
        transform: rotate(40deg);
        transform-origin: 50% 50%;
        border-radius: 0 0 0 2px
    }
    .body > span > span:nth-child(1),
    .body > span > span:nth-child(2),
    .body > span > span:nth-child(3),
    .body > span > span:nth-child(4) {
        width: 30px;
        height: 1px;
        background: #000000;
        position: absolute;
        animation: fazer1 .2s linear infinite
    }
    .body > span > span:nth-child(2) {
        top: 3px;
        animation: fazer2 .4s linear infinite
    }
    .body > span > span:nth-child(3) {
        top: 1px;
        animation: fazer3 .4s linear infinite;
        animation-delay: -1s
    }
    .body > span > span:nth-child(4) {
        top: 4px;
        animation: fazer4 1s linear infinite;
        animation-delay: -1s
    }
    @keyframes fazer1 {
        0% {
            left: 0
        }
        100% {
            left: -80px;
            opacity: 0
        }
    }
    @keyframes fazer2 {
        0% {
            left: 0
        }
        100% {
            left: -100px;
            opacity: 0
        }
    }
    @keyframes fazer3 {
        0% {
            left: 0
        }
        100% {
            left: -50px;
            opacity: 0
        }
    }
    @keyframes fazer4 {
        0% {
            left: 0
        }
        100% {
            left: -150px;
            opacity: 0
        }
    }
    @keyframes speeder {
        0% {
            transform: translate(2px, 1px) rotate(0deg)
        }
        10% {
            transform: translate(-1px, -3px) rotate(-1deg)
        }
        20% {
            transform: translate(-2px, 0px) rotate(1deg)
        }
        30% {
            transform: translate(1px, 2px) rotate(0deg)
        }
        40% {
            transform: translate(1px, -1px) rotate(1deg)
        }
        50% {
            transform: translate(-1px, 3px) rotate(-1deg)
        }
        60% {
            transform: translate(-1px, 1px) rotate(0deg)
        }
        70% {
            transform: translate(3px, 1px) rotate(-1deg)
        }
        80% {
            transform: translate(-2px, -1px) rotate(1deg)
        }
        90% {
            transform: translate(2px, 1px) rotate(0deg)
        }
        100% {
            transform: translate(1px, -2px) rotate(-1deg)
        }
    }
    .longfazers {
        position: absolute;
        width: 100%;
        height: 100%
    }
    .longfazers span {
        position: absolute;
        height: 2px;
        width: 20%;
        background: #000000
    }
    .longfazers span:nth-child(1) {
        top: 20%;
        animation: lf .6s linear infinite;
        animation-delay: -5s
    }
    .longfazers span:nth-child(2) {
        top: 40%;
        animation: lf2 .8s linear infinite;
        animation-delay: -1s
    }
    .longfazers span:nth-child(3) {
        top: 60%;
        animation: lf3 .6s linear infinite
    }
    .longfazers span:nth-child(4) {
        top: 80%;
        animation: lf4 .5s linear infinite;
        animation-delay: -3s
    }
    @keyframes lf {
        0% {
            left: 200%
        }
        100% {
            left: -200%;
            opacity: 0
        }
    }
    @keyframes lf2 {
        0% {
            left: 200%
        }
        100% {
            left: -200%;
            opacity: 0
        }
    }
    @keyframes lf3 {
        0% {
            left: 200%
        }
        100% {
            left: -100%;
            opacity: 0
        }
    }
    @keyframes lf4 {
        0% {
            left: 200%
        }
        100% {
            left: -100%;
            opacity: 0
        }
    }
  </style>
<div class='loadd'>
    <div class='body'>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <div class='base'>
            <span></span>
            <div class='face'></div>
        </div>
    </div>
    <div class='longfazers'>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
</div>
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
<script type='text/javascript'>
    $(window).load(function () {
        setTimeout(function () {
            $(".loadd").fadeOut("slow");
        }, 500)
    });
</script> 
Tutorial
  1. Double tap of code to copy it
  2. Go to your website control panel or dashboard
  3. Go to layout section
  4. Create a HTML widget in Home section of layout
  5. Paste the above given code in widget which you create in Home section of layout
  6. Save your settings

Comments

Post a Comment

Popular posts from this blog

[ UPDATED ]How to add a Stylish Note Block [Notebox] in any Blogger Template 2022

Image
  H ello Everyone! Welcome back to Monetizy, Today on this occasion our tutorial is  How to add a Stylish Note Block [Notebox] in any Blogger Template,   Note Block [Notebox] is Used to add important info, warning sentences or highlight sentences so that users can notice it easily and get aware of that. What is Note Block ? Note Block is a feature which is present default in some of the blogger the templates like iMagz, Median Ui, Fletro pro etc.... Note Block is used to Highlight a Important information, Any warning sentence or Highlight Any important steps so that the users can read it more efficiently and better than the normal text. so, this is the main use of Note Block Feature.  But some of the blogger templates which have default Note Block Feature have same old look and many of the blogger themes doesn't have this Note Block Feature exist so, I have tried to make something new  and gave a unique look to Note Block [Notebox] and this Notebox can be a...
Read more

New YouTube Tax Policy Will Reduce Income from the US Market?

Image
New YouTube Tax Policy Will Reduce Income from the US Market? YouTube informed content creators that YouTubers outside the United States may soon see as much as 30% of their earnings from US viewers withheld for tax. Indian YouTube creators were asked to provide their tax information to the platform in order to determine if they have any tax implications on earnings from US viewers, and how much. The new tax will affect the earnings of Indian YouTubers. It is especially applicable to those with a large US viewership. YouTubers claim that the US ad revenue is more than the Indian equivalent. Beebom is an English-language tech review channel that has more than 2 million subscribers.  TechWorldX  viewers in India are higher than in the US, the average revenue from advertisements shown to US viewers is greater. Although YouTube’s earnings have been taxed so far, content creators are concerned that Google, the company that owns YouTube will also begin levying taxes on its Goog...
Read more

Median Ui 1.6 Redesign Added Many More Feature Try It Now Fast Adsense Approval Template.

Image
➥  Median ui 1.6 Redesign Blogger Template Describe  Hello my dear friends ! Are you really finding a  Median UI redesign Blogger Template  ? Your searchs is over here! Finally I am going to share  Median UI Redesign Blogger Theme for free . Its a best redesign version of  median UI  because in this theme we are use high quality SVG icons to give attractive look for website or blog. You can edit  SVG icon fill color  as your choice.  Amazing background use in this median UI redesign blogger theme . Its also have popup recent comments widget to view the recent comments of your blog or website. So its also responsive with all types of device. It is also an  AdSense friendly blogger template  because I got AdSense in this template. So if you use this redesign blogger theme in your website then your website obviously approved by Google AdSense service. AdSense ads placements in this template is better than any other templates. So I...
Read more