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"
});
</script>
/*-----end----*/

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


No comments:

Post a Comment

Post Top Ad

Your Ad Spot