Al Mamun Hossen Blog

Graphic Designer | Web Developer | Opentype font Developer I am at any time very happy because my country's name is Bangladesh. I am an Emotional, Optimist, Challenging, Simple man, I always try my best to keep the good character, I love my Parents, My Motherland Bangladesh. I'm Working at Reem Group as Computer IT Solution & Ekushey as an Artwork Graphics Designer Opentype font Developer

Recent

Post Top Ad

Your Ad Spot

Wednesday, March 25, 2020

How To Add a Preloader To A Divi Website without plugin




Find Your Animation loading gif format file free & pro Download link or You can Create from Photoshop



Login Website

Copy This CSS Code


/*-----loading----*/
.loader {
    position: fixed;
    z-index: 99999999999999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
}

.loader > img {
    width: 100px;
}

.loader.hidden {
    animation: fadeOut .05s;
    animation-fill-mode: forwards;
}

@keyframes fadeOut {
    100% {
        opacity: 0;
        visibility: hidden;
    }
}

.thumb {
    height: 100px;
    border: 1px solid black;
    margin: 10px;
}
/*-----end----*/

Click Divi Theme Option ->  Custom CSS ->
Paste Custome CSS Holder


Copy  JS Code 


/*-----loader Hidden----script---*/
    
window.addEventListener("load", function () {
    const loader = document.querySelector(".loader");
    loader.className += " hidden"; // class "loader hidden"
});
 
/*-----end----script-----*/

Click Divi Theme Options -> Integration -> Add code to the < head > of your blog
Paste JS Code Holder


Copy HTML Code



<div class="loader">
    <img src="----add you LOADING ICON link gif format file---" alt="Loading..." /></div>

Click Divi Theme Options -> Integration ->  Add code to the < body > (good for tracking codes such as google analytics)

Paste HTML Code Holder


3 comments:

  1. However, in the early 2000's it was discovered that a surging number of web traffic was inconsiderate to the homepage and was directly going to the contents of the pages via e-newsletters, RSS feeds and search engines. Web designer

    ReplyDelete
  2. Skillfully design website is launched it is highly beneficial if the necessary search engine optimization strategies are put in place. A well planned marketing campaign is necessary to help attract the desired visitors in the hope of generating sales from the products or services available on the website. A well-rounded Toronto Website Design company is likely to be able to offer services relating to organic link building, social media integration, content and reputation management, and many other practices that are able to improve on the online visibility of a website.

    ReplyDelete

Post Top Ad

Your Ad Spot