XenForo 1.X Bar de Progression YouTube

[Shems]

​

Version Compatible :

1. 1.1
2. 1.2
3. 1.3
4. 1.4

Ce tutoriel vous sert à ajouter la barre de progression d'un chargement de page comme sur YouTube.

1. Ajouter le JS Suivant avant le </ head> dans temp PAGE_CONTAINER

<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>

2. Ajouter le code suivant dans EXTRA.css

#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;
}

 

[7even.]

Screen ?

 

[Shems]

Screen ?

Ajouter; j'ai pris un screen sur youtube direct