Barre de progression HTML

La norme W3C stipule que la barre de progression termine une tâche spécifique à l'aide d'un élément de progression. Les développeurs utilisent la balise de progression pour afficher une barre de progression et représenter la progression du téléchargement des fichiers sur les pages Web. HTML intègre cette balise, offrant aux développeurs Web une méthode simple pour afficher la barre. Cette balise est totalement différente de la balise balise, représentant l’utilisation de l’espace disque. Et il est pris en charge en HTML5, et la croissance constante de HTML5 contribue à introduire un outil intéressant.

Syntaxe :

Cet élément de progression a à la fois la balise de début et de fin, et ci-dessous montre la syntaxe de base de la balise. Cela implique le statut de tout processus. La barre de progression a des manières d'affichage en ligne.

<progress bar>
……
</progress>bar>

Attributs

Les attributs fournissent un élément informatif comme le comportement de l'explorateur dans le HTML. Il existe trois attributs dans le HTML : les attributs d'événement et les attributs globaux. En plus de ces attributs, l'élément progress possède deux nouveaux attributs :

max – La valeur par défaut est 1,0 et indique le nombre total de travaux nécessaires pour terminer la tâche.

valeur – Ceci spécifie la quantité de travail à terminer. La valeur par défaut est inférieure à 1,0. En l'absence de l'attribut Val, la barre de progression est indéterminée.

Des exemples de barres de progression incluent la pièce jointe d'un fichier, le chargement du document pour la première fois ou le chargement d'une page Web.

Méthodes pour créer une barre de progression en HTML

Une barre de progression a deux états différents : déterminé et indéterminé. Dans le cas de la barre de progression indéterminée, vous attribuez une valeur nulle à l'attribut value, ce qui facilite le style. En revanche, pour l'état déterminé, vous définissez deux nouveaux attributs, max et value, comme indiqué dans les exemples ci-dessous. Il utilise une apparence de mouvement pour indiquer la tâche avec la barre horizontale. Si le travail respectif ne dépend pas de la tâche, alors le la balise est attribuée. Concernant la compatibilité des navigateurs, il prend en charge tous les navigateurs sauf Internet Explorer (support partiel). En fonction de la compatibilité du navigateur, la barre de progression peut être différente. Cet article se concentrera sur l'état déterminé de la barre avec les attributs max et Val.

Exemple : Voyons maintenant l'implémentation de base d'une barre de progression avec les attributs min et val.

Downloading on process:
<progress value="19" max="90">
</progress>
<p><strong>Note:</strong> The progress tag is used to represent a progress bar for quite period of time. </p>

Sortie :

1. Utiliser CSS

Ensuite, nous verrons comment rendre une barre de progression élégante et cohérente sur toutes les plateformes. Pour baliser la barre de progression, nous utilisons un sélecteur de valeur et ajustons les dimensions, telles que la largeur et la hauteur de l'élément de progression, pour créer une barre de progression visuellement attrayante. Cependant, la gestion de différents navigateurs peut compliquer ce processus. Le navigateur apporte quelques ajustements au calibre de l'exécution de la tâche. Nous donnons à la barre HTML un aspect franc en appliquant l'effet dimensionnel.

Exemple :

<h1 id="Using-Style-Sheet-in-Progress-bar"> Using Style Sheet in Progress bar </h1>
<style>
progress{width:400px;height:40px}
</style>


<progress value="60" max="100"></progress>

Sortie :

2. Utiliser les ombres et les couleurs de la boîte

Avec la feuille de style, nous pouvons ajouter des règles de style à cet élément en donnant une couleur d'arrière-plan, en attribuant une hauteur, etc. Les couleurs peuvent être appliquées en appliquant la fonction rgba(). L'élément de barre de progression peut être réalisé avec différentes couleurs pour afficher le bon résultat. Ceci est mappé avec l’attribut « classe ». Généralement, la barre de progression se déplace de gauche à droite pour indiquer la tâche lorsqu'elle démarre à partir du « 0 » initial et affiche les résultats une fois qu'elle atteint l'objectif.

Exemple :

<h1 id="Using-Style-Sheet-in-Progress-bar-demo"> Using Style Sheet in Progress bar demo </h1>
<style>
progress{width:200px;height:20px;background-color:pink;
border-radius: 4px;position: absolute;
right: 0px;
top: 80px;
box-shadow: 0 3px 6px rgba(255, 255, 0, 255) inset;}
</style>


<progress value="40" max="100"></progress>

Sortie :

Remarque : Différents navigateurs gèrent la barre avec quelques variantes. Chrome utilise la feuille de style Webkit en remplaçant les styles natifs.

Échantillon :

barre de progression :: – WebKit-Progress-bar

Même la taille d'une barre de progression peut varier entre petite, moyenne et grande à l'aide de l'attribut class.

3. Utiliser Span

Le code ci-dessous est indéterminé, indiquant qu'un processus est en cours pendant un certain temps.

Exemple :

<h1 id="Using-Style-Sheet-in-Progress-bar"> Using Style Sheet in Progress bar </h1>
<style>
progress{width:120px;height:20px}
</style>


<progress max="100">
<span>20</span>%
</progress>

Sortie :

4. Utilisation d'un exemple JavaScript

Les règles suivantes doivent être appliquées en utilisant javascript. Création de

élément si nécessaire et ensuite créer une feuille de style, puis les intégrer ensemble. Le code ci-dessous montre la barre de progression de base avec JavaScript.

Exemple n°1

<script>
var pgx=2;
function bar(){
var prog = document.getElementById ('progress demo');
setInterval (function ()
{
if(pgx<90){
pgx++;
prog.value =pgx;
}
bar();
}, 100);
}
</script>
<progress id="progress demo" min="2" max="100"></progress>
<br><br>
<button onclick="bar()"> submit</button>

Sortie :

Exemple n°2

<title>implementation of HTML progress Tag</title>


<h2> <i>Task in scheduled Progress </i>
</h2>
<p>Process: <progress id="bar" value="1" max="100"><span>0</span>%</progress></p>
<script type="text/javascript">
var k = 0;
var progb = document.getElementById("bar");
function count(){
if(k < 100){
k = k + 1;
progb.value = k;
progb.getElementsByTagName("span")[0].textContent = k;
}
setTimeout("count()", 400);
}
count();
</script>

Output:

NOTE: Even you can add some animation effects to the progress bar. To do so, we have to assign some interval timings by assigning some value to it and directing incrementing infinitely, to make the situation control conditional statement used.

Conclusion

Therefore, this article explains how to create a highly flexible and lightweight HTML progress bar. Finally, we have briefly seen the concept as the activity indicator. This element indicates how to load a page or make some registration process and probably represents a percentage of 100 for the max value. When the length of the time task is unknown, developers usually use this mode in the installation or loading page scenario. And that’s even an implementation using Html5 with some cool effects.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!