Welcome to Our Community

Registration on our forums are now open for some days! Feel free to sign up today.

Load Progress Bar Like Youtube

Processing Look like Youtube

  1. crash_king
    Compatible XF Versions:
    • 1.1
    • 1.2
    • 1.3
    • 1.4
    1951.png

    This tutorial guides you to do the same Youtube page load

    1: Add the following js before the </ head> in temp PAGE_CONTAINER

    Code:
    <script>
    
    $(function() {
    $("body").append($("<div></div>").attr("id", "progress"));
    $("#progress").width((50 + Math.random() * 30) + "%");
    });
    $(window).load(function() {
    $("#progress").width("101%").delay(300).fadeOut(400);
    });
    </script>
    Step 2: Add the following css Extra.css.

    Code:
    #progress {position: fixed;
        z-index: 100;
        top: 0;
        left: -6px;
        width: 1%;
        height: 3px;
        background: #ff0000;
        border-radius: 1px;
        transition: width 500ms ease-out,opacity 400ms linear;
    }

    Save > F5 > Enjoy
    nomoreturn likes this.