Welcome to Our Community

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

[Template/Code Modification] 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.