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
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 < mètre> 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.
<!DOCTYPE html> <html> <body> 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> </body> </html>
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 :
<!DOCTYPE>
<html>
<head>
<h1> Using Style Sheet in Progress bar </h1>
<style>
progress{width:400px;height:40px}
</style>
</head>
<body>
<progress value="60" max="100"></progress>
</body>
</html>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 :
<!DOCTYPE>
<html>
<head>
<h1> 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>
</head>
<body>
<progress value="40" max="100"></progress>
</body>
</html>Sortie :
É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 :
<!DOCTYPE>
<html>
<head>
<h1> Using Style Sheet in Progress bar </h1>
<style>
progress{width:120px;height:20px}
</style>
</head>
<body>
<progress max="100">
<span>20</span>%
</progress>
</body>
</html>Sortie :
4. Utilisation d'un exemple JavaScript
Les règles suivantes doivent être appliquées en utilisant javascript. Création de
Exemple n°1
<!DOCTYPE>
<html>
<body>
<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>
</body>
</html>Sortie :
Exemple n°2
<!DOCTYPE html>
<html lang="en">
<head>
<title>implementation of HTML progress Tag</title>
</head>
<body>
<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>
</body>
</html>Output:
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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
1672
14
1428
52
1332
25
1277
29
1257
24
Bordure de tableau en HTML
Sep 04, 2024 pm 04:49 PM
Guide de la bordure de tableau en HTML. Nous discutons ici de plusieurs façons de définir une bordure de tableau avec des exemples de bordure de tableau en HTML.
Tableau imbriqué en HTML
Sep 04, 2024 pm 04:49 PM
Ceci est un guide des tableaux imbriqués en HTML. Nous discutons ici de la façon de créer un tableau dans le tableau ainsi que des exemples respectifs.
Marge gauche HTML
Sep 04, 2024 pm 04:48 PM
Guide de la marge HTML gauche. Nous discutons ici d'un bref aperçu de la marge gauche HTML et de ses exemples ainsi que de son implémentation de code.
Disposition du tableau HTML
Sep 04, 2024 pm 04:54 PM
Guide de mise en page des tableaux HTML. Nous discutons ici des valeurs de la mise en page des tableaux HTML ainsi que des exemples et des résultats en détail.
Espace réservé d'entrée HTML
Sep 04, 2024 pm 04:54 PM
Guide de l'espace réservé de saisie HTML. Nous discutons ici des exemples d'espace réservé d'entrée HTML ainsi que des codes et des sorties.
Comment analysez-vous et traitez-vous HTML / XML dans PHP?
Feb 07, 2025 am 11:57 AM
Ce tutoriel montre comment traiter efficacement les documents XML à l'aide de PHP. XML (Language de balisage extensible) est un langage de balisage basé sur le texte polyvalent conçu à la fois pour la lisibilité humaine et l'analyse de la machine. Il est couramment utilisé pour le stockage de données et
Liste ordonnée HTML
Sep 04, 2024 pm 04:43 PM
Guide de la liste ordonnée HTML. Ici, nous discutons également de l'introduction de la liste et des types HTML ordonnés ainsi que de leur exemple respectivement.
Bouton HTML onclick
Sep 04, 2024 pm 04:49 PM
Guide du bouton HTML onclick. Nous discutons ici de leur introduction, de leur fonctionnement, des exemples et de l'événement onclick dans divers événements respectivement.
