CODEWITHSUNDEEP
javascriptjquery
Morteza Negahi
Morteza Negahi

Reputation: 232

Why my loading doesn't work

Why this loading doesn't work in onloadstart event ? I need when page started to load my progress width come to fifty percent during of three sec.

Html

<div class="loading">
        <div class="loading-progress"></div>
</div>

Css

.loading {
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 2000;
    padding: 20% 0;
    position: fixed;
    overflow: hidden;
    background: rgba(0,0,0,90);
}
.loading-progress{
    width: 0;
    padding: 2px;
    background: red;
}

And Jquery

$(document).ready(function () {

    window.onload = function() {

        $('.loading-progress').animate({width:'100%'},'fast', function () {
            $('.loading').fadeOut('1000');
        });

    };

    window.onloadstart = function(){

        $('.loading-progress').animate({width:'50%'},3000)

    };

});

Upvotes: 0

Views: 173

Answers (1)

Morteza Negahi
Morteza Negahi

Reputation: 232

I used this animation for .loading-progress and my problem was solved.

.loading-progress{
    width: 50%;
    padding: 2px;
    background: red;
    -webkit-animation: myfirst linear 3s; /* Chrome, Safari, Opera */
    animation: myfirst linear 3s;
}

@keyframes myfirst {
    0%   {width: 0;}
    100% {width: 20%;}
}

and delete the onloadstart .

Upvotes: 1

Related Questions