0

I have a preloader for my website. I was wondering if there is a way to finish the preloader animation based on the loading time of the content from the webpage. I think that the "animation: dash 5s ease forwards;" needs to change based on the loading time. Is there a way to accomplish this?

The code so far:

$(window).on('load', function() {
  $('#preloader').fadeOut(); 
  $('#preloader-container').delay(250).fadeOut('slow'); 
  $('body').delay(250).css({'overflow':'visible'});
})
#preloader-container{
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    background: #fcfbfa;
    min-height: 100%;
    min-width: 100%;
    cursor: wait;
    overflow: hidden;
    flex-direction: column;
    text-align: center;
}

#preloader{
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#preloader{
    display: flex;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    fill: none;
    stroke: #d8d7d6;
    stroke-linecap: round;
    stroke-miterlimit: 10;
    stroke-width: 6px;
    animation: dash 5s ease forwards;
}

@keyframes dash {

    0%{stroke-dashoffset: 1000; opacity: 0; transform: scale(1);}

    5%{opacity: 1;}

    19% {transform: scale(1);}

    24% {transform: scale(1.1);}

    29%{transform: scale(1);}

    100% {transform: scale(1); stroke-dashoffset: 0;}
    
}
<div id="preloader-container">
    <div id="preloader">
        <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" height="60" viewBox="0 0 78 78">
            <path d="M75,40A35,35,0,1,1,40,5,35,35,0,0,1,75,40" transform="translate(-1 -1)"/>
        </svg>
    </div>
</div>
Devi
  • 51
  • 1
  • 9
  • 3
    `based on the loading time` the loading time of what? – johannchopin Aug 18 '20 at 16:03
  • Based on the loading time of the website page / content of the page – Devi Aug 18 '20 at 16:07
  • The loading time is not known until after the page has loaded. For tasks of unknown length it is common to use a repeating animation, rather than a gauge. – Turnip Aug 18 '20 at 16:14
  • Does this answer your question? [Display a loading bar before the entire page is loaded](https://stackoverflow.com/questions/11072759/display-a-loading-bar-before-the-entire-page-is-loaded) – lukaszkups Aug 18 '20 at 16:21
  • 1
    Ah, so there is no way to let an animation run based on the time is takes for a page to load? So you also can't make a loading/progress bar? The best way is to make a loop of the animation and fade it out? – Devi Aug 18 '20 at 16:21

0 Answers0