Custom preloader hungs forever on certain browsers

This topic has 2 replies, 2 voices, and was last updated 4 years, 6 months ago ago by Olga Barlow

  • Avatar: soap2g
    soap2g
    Participant
    June 17, 2021 at 19:36

    Hello, I recently added a custom preloader via WP Smart Preloader.
    Apparently the whole thing works randomly. In particular sometimes the animation doesn’t end and the page hungs forever. Here is the code:

    HTML:

    <div id="preloader">
      <div id="loader"></div>
    </div>

    CSS:

    #preloader {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #203258;
    }
    #loader {
        display: block;
        position: relative;
        left: 50%;
        top: 50%;
        width: 150px;
        height: 150px;
        margin: -75px 0 0 -75px;
        border-radius: 50%;
        border: 3px solid transparent;
        border-top-color: #16a085;
        -webkit-animation: spin 2s linear infinite;
        animation: spin 2s linear infinite;
    }
    #loader:before {
        content: "";
        position: absolute;
        top: 5px;
        left: 5px;
        right: 5px;
        bottom: 5px;
        border-radius: 50%;
        border: 3px solid transparent;
        border-top-color: #e74c3c;
        -webkit-animation: spin 3s linear infinite;
        animation: spin 3s linear infinite;
    }
    #loader:after {
        content: "";
        position: absolute;
        top: 15px;
        left: 15px;
        right: 15px;
        bottom: 15px;
        border-radius: 50%;
        border: 3px solid transparent;
        border-top-color: #f9c922;
        -webkit-animation: spin 1.5s linear infinite;
        animation: spin 1.5s linear infinite;
    }
    @-webkit-keyframes spin {
        0%   {
            -webkit-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        100% {
            -webkit-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }
    @keyframes spin {
        0%   {
            -webkit-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        100% {
            -webkit-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }

    I suspect that I should add some js, but I can’t find the section on XStore..
    Any ideas?

    EDIT: some typos and I use a child theme

    Please, contact administrator
    for this information.
    1 Answer
    Avatar: Olga Barlow
    Olga Barlow
    Participant
    June 18, 2021 at 11:35

    Hello,

    We don’t have option in our theme to add custom js files. So, either use child theme for these purposes (don’t forget to import parent theme options to child theme once you install child theme) or use third-party plugins that allow adding custom JS code to your site.

    Regards

  • Viewing 2 results - 1 through 2 (of 2 total)

The issue related to '‘Custom preloader hungs forever on certain browsers’' has been successfully resolved, and the topic is now closed for further responses

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.