Explication détaillée de la barre de progression HTML5

Introduction à l'élément de progression HTML5 La progression est un nouvel élément de HTML5, ce qui signifie définir une barre de progression et a un large éventail d'utilisations, peut être utilisé pour afficher la progression du téléchargement de fichiers, la progression du téléchargement de fichiers et peut également être utilisé comme barre d'état de chargement pour le chargement.

Syntaxe de la barre de progression HTML5 '70' max= '100' &gt ;

'70' max= '100' >

Cliquez ici pour voir à quoi ressemble la barre de progression html5.

attribut de progression html5 progress max l'attribut max représente la valeur de progression maximale du la barre de progression, si elle est présente, doit être un nombre à virgule flottante valide supérieur à 0. La valeur par défaut de max est 1.

valeur de progression L'attribut value indique la progression de la barre de progression. La plage de valeurs est 0. ~ entre max. Si l'attribut max n'est pas défini, l'attribut value doit être compris entre 0 et 1.

S'il n'y a aucune valeur, la progression de l'achèvement est incertaine. À l’heure actuelle, cela signifie que la tâche est en cours, mais on ne sait pas combien de temps il faudra pour la terminer. À l'heure actuelle, la progression peut être utilisée comme chargement dans les navigateurs Webkit, indiquant que la page est en cours de chargement ou qu'Ajax demande des données d'arrière-plan.

La photo ci-dessus est prise à partir du navigateur Chrome.

La progression sans définir de valeur est comme un chargement, avec le bloc de progression au milieu errant d'avant en arrière.

La progression sans valeur ressemble à ci-dessous dans la fenêtre 7 :

C'est effectivement un peu moche, mais il hérite du style typique des fenêtres.

compatibilité de progression HTML5 la progression est prise en charge dans les navigateurs IE10+

Affichage de l'effet de progression html5 Le code de simulation de l'effet d'animation de progression est le suivant :

您的浏览器不支持progress元素

function goprogress(){ var pro=document.getElementsByTagName("progress")[0]; gotoend(pro,0); } function gotoend(pro,value){ var value=value+1; pro.value=value; if(value

Cliquez ici pour voir la simulation d'animation de progression.

Paramètres de style liés à la progression HTML5 Nous pouvons implémenter un style personnalisé pour la progression. à titre d'exemple, parlons des styles de progrès que nous pouvons définir.

Nous devons changer progrès Cela ressemble à ce qui précède.

Le code est le suivant :

您的浏览器不支持progress元素 .mypro{ background:orange; border:1px solid red; border:2px solid #000; width:300px; height:50px; -webkit-appearance: none; } ::-ms-fill{ background:deeppink; } ::-moz-progress-bar{ background:deeppink; } ::-webkit-progress-bar{ background:orange; } ::-webkit-progress-value{ background:deeppink; }

le progrès peut définir des attributs communs tels que la largeur, la hauteur, la bordure, etc.

Pour les navigateurs IE10+ et Firefox, vous pouvez utiliser l'arrière-plan pour définir la couleur d'arrière-plan de la barre de progression.

Pour les navigateurs webkit, utilisez ::-webkit-progress-bar pour définir la couleur d'arrière-plan de la barre de progression.

Pour IE10+, utilisez ::-ms-fill pour définir la couleur d'arrière-plan de la progression de la barre de progression.

Pour Firefox, utilisez ::-moz-progress-bar pour définir la couleur d'arrière-plan de la barre de progression.

Pour les navigateurs webkit, utilisez ::-webkit-progress-value pour définir la couleur d'arrière-plan de la progression de la barre de progression.

REMARQUE : ::-paramètres de la barre de progression du webkit est la couleur d'arrière-plan de la barre de progression, et ::-moz-progres-bar définit la couleur d'arrière-plan de la barre de progression pour terminer la progression, ce qui est exactement le contraire.

Et pour les navigateurs webkit, sur IOS, vous devez utiliser -wekbit-apparence:none pour effacer le style de progression par défaut, afin que la couleur d'arrière-plan et la couleur de progression peut être modifiée.

Cliquez ici pour afficher le style de barre de progression personnalisée.

conclusion des progrès html5

Nous pouvons télécharger le fichier en ajax2, upload.onprogress L'utilisation de la progression dans le rappel d'événement peut facilement afficher la progression du téléchargement du fichier. Vous pouvez également utiliser l'élément progress dans l'événement onprogress utilisé dans l'image d'aperçu FileReader pour afficher la progression de la lecture de l'image.

Cet article explique la barre de progression HTML5 Pour plus de contenu connexe, veuillez faire attention au site Web chinois php.

Recommandations associées :

Classe de pagination PHP+MySQL simple

Deux constructeurs de tableaux arborescents sans récursion

Convertir le HTML en Excel et l'implémenter Imprimer et télécharger fonctions

Explication détaillée de la barre de progression HTML5

Articles Liés