{"id":3367,"date":"2013-09-02T08:56:41","date_gmt":"2013-09-02T06:56:41","guid":{"rendered":"https:\/\/www.creativejuiz.fr\/blog\/?p=3367"},"modified":"2020-09-02T20:26:08","modified_gmt":"2020-09-02T18:26:08","slug":"html5-element-progress-avancement-tache","status":"publish","type":"post","link":"https:\/\/www.creativejuiz.fr\/blog\/veille-technologique\/html5-element-progress-avancement-tache","title":{"rendered":"HTML5 : l&rsquo;\u00e9l\u00e9ment progress, avancement d&rsquo;une t\u00e2che"},"content":{"rendered":"<p>L&rsquo;\u00e9l\u00e9ment progress en HTML5 permet de visualiser l&rsquo;avancement d&rsquo;une t\u00e2che. C&rsquo;est un \u00e9l\u00e9ment encore assez m\u00e9connu mais qui peut \u00eatre pratique dans quelques cas o\u00f9 vous avez besoin de permettre \u00e0 l&rsquo;utilisateur de visualiser une \u00e9volution ou un stade pr\u00e9cis dans un processus. Voyons comment l&rsquo;int\u00e9grer et styler cet \u00e9l\u00e9ment.<!--more--><\/p>\n<h2>Quelques exemples d&rsquo;utilisation<\/h2>\n<p>Avant de nous lancer dans du code, voici quelques id\u00e9es ou exemples d&rsquo;int\u00e9gration d&rsquo;un tel \u00e9l\u00e9ment dans votre code.<\/p>\n<ul>\n<li>Progression dans le remplissage d&rsquo;un formulaire,<\/li>\n<li>Progression dans le remplissage d&rsquo;un profil utilisateur,<\/li>\n<li>Progression du chargement d&rsquo;un fichier,<\/li>\n<li>Niveau d&rsquo;avancement de votre refonte\/construction de site web,<\/li>\n<li>\u00c9tat de compl\u00e9tion d&rsquo;une t\u00e2che, quelle qu&rsquo;elle soit.<\/li>\n<\/ul>\n<p>Le W3C d\u00e9finit cet \u00e9l\u00e9ment comme :<\/p>\n<blockquote><p>[\u2026] repr\u00e9sentant l&rsquo;\u00e9tat d&rsquo;avancement d&rsquo;une t\u00e2che. [\u2026] L&rsquo;utilisation pour quelque chose qui ne d\u00e9finit qu&rsquo;une jauge est inappropri\u00e9e.<\/p><\/blockquote>\n<p>En somme, par exemple, si vous avez besoin d&rsquo;indiquer l&rsquo;\u00e9tat d&rsquo;occupation d&rsquo;un disque dur (ex: 250\/500 Go), cet \u00e9l\u00e9ment HTML5 n&rsquo;est pas appropri\u00e9. Dans ce cas l&rsquo;\u00e9l\u00e9ment HTML5 <code class=\"element\">meter<\/code> serait plus appropri\u00e9.<\/p>\n<h2>\u00c0 quoi ressemble <code class=\"element\">progress<\/code>\u00a0?<\/h2>\n<p>Faisons simple et utilisons ce morceau de code.<\/p>\n<div class=\"code-embed-wrapper\"> <pre class=\"language-markup code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-markup code-embed-code\">&lt;progress max=&quot;100&quot; value=&quot;25&quot; form=&quot;form-id&quot;&gt;25%&lt;\/progress&gt;<\/code><\/pre> <div class=\"code-embed-infos\"> <\/div> <\/div>\n<p>Nous retrouvons trois attributs sur cet \u00e9l\u00e9ment :<\/p>\n<ul>\n<li><code>value<\/code> : repr\u00e9sente le curseur d&rsquo;avancement<\/li>\n<li><code>max<\/code> : repr\u00e9sente la valeur max (peut \u00eatre diff\u00e9rent de 100 bien entendu)<\/li>\n<li><code>form<\/code> : doit cibler l&rsquo;ID d&rsquo;un formulaire. Par d\u00e9faut l&rsquo;\u00e9l\u00e9ment est associ\u00e9 au formulaire parent le plus proche.<\/li>\n<\/ul>\n<p>Voici l&rsquo;\u00e9l\u00e9ment une fois int\u00e9gr\u00e9 (si votre navigateur le supporte, vous le verrez juste en dessous de cette phrase) :\n<progress value=\"25\" max=\"100\">25%<\/progress>\n<p>Grosso-modo, voici les rendus par d\u00e9faut sur les diff\u00e9rents navigateurs.<\/p>\n<p class=\"center\"><a class=\"fancy\" href=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2013\/08\/progress-html5-element.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-3618\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2013\/08\/progress-html5-element.png\" alt=\"\u00c9l\u00e9ment progress sur les diff\u00e9rents navigateurs\" width=\"601\" height=\"326\" srcset=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2013\/08\/progress-html5-element.png 601w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2013\/08\/progress-html5-element-300x162.png 300w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2013\/08\/progress-html5-element-600x325.png 600w\" sizes=\"(max-width: 601px) 100vw, 601px\" \/><\/a><\/p>\n<p>Les styles par d\u00e9faut correspondent souvent aux styles de la barre de progression de votre <abbr title=\"Operating System\">OS<\/abbr>. Bien s\u00fbr les styles ci-dessus pourront \u00e9voluer avec le temps, il est probable que cette image devienne obsol\u00e8te rapidement.<\/p>\n<h2>Personnalisation des styles de l&rsquo;\u00e9l\u00e9ment <code class=\"element\">progress<\/code><\/h2>\n<p>Venons-en aux possibilit\u00e9s de styler cet \u00e9l\u00e9ment : c&rsquo;est un peu la gal\u00e8re !<br \/>\nConcr\u00e8tement il faut utiliser des pseudos-classes qui ne sont pas norm\u00e9es, et surtout sur des \u00e9l\u00e9ments et pseudo-\u00e9l\u00e9ments qui n&rsquo;ont pas la m\u00eame hi\u00e9rarchie.<br \/>\nDans Firefox par exemple, l&rsquo;\u00e9l\u00e9ment <code class=\"element\">progress<\/code> se trouve \u00eatre la totalit\u00e9 de la zone d&rsquo;accueil de la valeur repr\u00e9sent\u00e9e par le pseudo-\u00e9l\u00e9ment <code>::-moz-progress-bar<\/code>. Pour Chrome, l&rsquo;\u00e9l\u00e9ment <code class=\"element\">progress<\/code> est le premier conteneur, dans lesquels se trouvent <code>::-webkit-progress-bar<\/code> puis <code>::-webkit-progress-value<\/code>.<\/p>\n<p>Sch\u00e9matis\u00e9e nous avons donc la hi\u00e9rarchie suivante :<\/p>\n<div class=\"code-embed-wrapper\"> <pre class=\"language-haml code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-haml code-embed-code\">\/\/ Firefox<br\/>|- progress<br\/>|-- ::-moz-progress-bar<br\/><br\/>\/\/ Chrome<br\/>|- progress<br\/>|-- ::-webkit-progress-bar<br\/>|---- ::-webkit-progress-value<\/code><\/pre> <div class=\"code-embed-infos\"> <\/div> <\/div>\n<p>Cette diff\u00e9rence peut proposer des probl\u00e8mes d&rsquo;incoh\u00e9rence dans les styles. Nous allons travailler sur un style que voici pour exemple.<\/p>\n<p class=\"center\"><a href=\"\/trytotry\/progress-element-css3-html5.html\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-3620\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2013\/08\/progress-html5-styles-css.png\" alt=\"\u00c9l\u00e9ment progress styl\u00e9\" width=\"600\" height=\"100\" srcset=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2013\/08\/progress-html5-styles-css.png 600w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2013\/08\/progress-html5-styles-css-300x50.png 300w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\n<p>Pour cr\u00e9er ce style, il va falloir dupliquer une partie du code CSS. Mon processus personnel est de commencer par Firefox, puis ajouter les pseudo-classes pour Chrome, mais chacun ses pr\u00e9f\u00e9rences \ud83d\ude09<\/p>\n<div class=\"code-embed-wrapper\"> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">progress {<br\/>\tdisplay: block; \/* default: inline-block *\/<br\/>\twidth: 300px;<br\/>\tmargin: 1em auto;<br\/>\tpadding: 4px;<br\/>\tborder: 0 none;<br\/>\tbackground: #444;<br\/>\tborder-radius: 14px;<br\/>\tbox-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);<br\/>}<br\/><br\/>progress::-moz-progress-bar {<br\/>\tbackground: #FFF;<br\/>\tborder-radius: 12px;<br\/>\tbox-shadow: inset 0 -2px 4px rgba(0,0,0,0.4), 0 2px 5px 0px rgba(0,0,0,0.3);<br\/>}<\/code><\/pre> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">Style pour Firefox<\/span> <\/div> <\/div>\n<p>Voil\u00e0 pour Firefox, ainsi nous avons les effets de base, mais nous allons devoir compl\u00e9ter pour Chrome, qui ne comprend pour le moment dans notre code que la partie ciblant <code>progress<\/code>.<\/p>\n<div class=\"code-embed-wrapper\"> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">\/* une m\u00e9thode pour ne cibler que Chrome *\/<br\/>@media screen and (-webkit-min-device-pixel-ratio:0) {<br\/>\tprogress {<br\/>\t\theight: 25px; \/* l\u00e9g\u00e8rement plus fin sur Chrome par d\u00e9faut *\/<br\/>\t}<br\/>}<br\/><br\/>\/* on enl\u00e8ve le fond de cet \u00e9l\u00e9ment suppl\u00e9mentaire *\/<br\/>progress::-webkit-progress-bar {<br\/>\tbackground: transparent;<br\/>}<br\/><br\/>\/* on applique les m\u00eames styles que sur ::-moz-progress-bar *\/<br\/>progress::-webkit-progress-value {<br\/>\tbackground: #FFF;<br\/>\tborder-radius: 12px;<br\/>\tbox-shadow: inset 0 -2px 4px rgba(0,0,0,0.4), 0 2px 5px 0px rgba(0,0,0,0.3);<br\/>}<\/code><\/pre> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">Code pour Chrome<\/span> <\/div> <\/div>\n<p>Il existe d&rsquo;autres m\u00e9thodes ressemblantes que je vous invite \u00e0 consulter en lisant les quelques articles fournis juste en dessous dans les liens et sources utiles.<br \/>\nN&rsquo;h\u00e9sitez pas \u00e0 partager vos rendus ou vos astuces \ud83d\ude09<br \/>\nAmusez-vous bien !<\/p>\n<p class=\"center\"><a class=\"demonstration\" href=\"\/trytotry\/progress-element-css3-html5.html\" hreflang=\"en\">D\u00e9mo du tutoriel<\/a> <a class=\"demonstration\" href=\"http:\/\/codepen.io\/CreativeJuiz\/pen\/DKsjm\" hreflang=\"en\">Sur CodePen.io<\/a><\/p>\n<h2>Compatibilit\u00e9<\/h2>\n<p>Le support navigateur est le suivant : Firefox 16+, Opera 11+, Chrome, Safari 6+, IE10+ (avec support partiel).<br \/>\nPour les autres navigateurs, il existe un polyfill cr\u00e9\u00e9 par Lea Verou : <a lang=\"en\" href=\"http:\/\/lea.verou.me\/polyfills\/progress\/\" hreflang=\"en\">progress-polyfill.js<\/a>.<br \/>\nIl permet d&rsquo;amener le support \u00e0 : Firefox 3.5-5, Opera 10.5-10.63, IE9-10 (et presque IE8).<\/p>\n<h2>Quelques articles pour aller plus loin<\/h2>\n<p>Si vous ne le saviez pas, vous pouvez \u00e9galement styler certains \u00e9l\u00e9ments de formulaire comme les boutons radio, les checkbox, ou les input de type file.<\/p>\n<ul>\n<li><a href=\"https:\/\/www.creativejuiz.fr\/blog\/tutoriels\/personnaliser-aspect-boutons-radio-checkbox-css\">Styler des checkboxes et boutons radio en CSS<\/a><\/li>\n<li><a href=\"https:\/\/www.creativejuiz.fr\/blog\/tutoriels\/input-file-personnalise-css-js\">Styler des \u00e9l\u00e9ments input de type file en CSS<\/a><\/li>\n<\/ul>\n<div class=\"sources\">\n<h2>Liens et sources utiles<\/h2>\n<ul>\n<li><a lang=\"en\" href=\"http:\/\/html5doctor.com\/the-progress-element\/\" hreflang=\"en\">HTML5 Doctor &#8211; Progress Element<\/a><\/li>\n<li><a lang=\"en\" href=\"http:\/\/css-tricks.com\/html5-element\/\" hreflang=\"en\">CSS Tricks &#8211; HTML5 Element<\/a><\/li>\n<li><a lang=\"en\" href=\"http:\/\/www.hongkiat.com\/blog\/html5-progress-bar\/\" hreflang=\"en\">Hong Kiat &#8211; HTML5 progress bar<\/a><\/li>\n<li><a href=\"http:\/\/www.alsacreations.com\/article\/lire\/1416-html5-meter-progress.html\">Alsacr\u00e9ations &#8211; Meter et progress<\/a><\/li>\n<\/ul>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>L&rsquo;\u00e9l\u00e9ment progress en HTML5 permet de visualiser l&rsquo;avancement d&rsquo;une t\u00e2che. C&rsquo;est un \u00e9l\u00e9ment encore assez m\u00e9connu mais qui peut \u00eatre pratique dans quelques cas o\u00f9 vous avez besoin de permettre \u00e0 l&rsquo;utilisateur de visualiser une \u00e9volution ou un stade pr\u00e9cis dans un processus. Voyons comment l&rsquo;int\u00e9grer et styler cet \u00e9l\u00e9ment.<\/p>\n","protected":false},"author":4,"featured_media":3624,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bluesky_dont_syndicate":"","_bluesky_syndication_accounts":"","_bluesky_syndication_text":"","footnotes":""},"categories":[12],"tags":[560,16,543,542,268],"coauthors":[597],"class_list":["post-3367","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-veille-technologique","tag-forms","tag-html5","tag-meter","tag-progress","tag-w3c"],"acf":[],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 4.9.8 - aioseo.com -->\n\t<meta name=\"description\" content=\"L&#039;\u00e9l\u00e9ment progress en HTML5 permet de visualiser l&#039;avancement d&#039;une t\u00e2che. C&#039;est un \u00e9l\u00e9ment encore assez m\u00e9connu mais qui peut \u00eatre pratique dans quelques cas o\u00f9 vous avez besoin de permettre \u00e0 l&#039;utilisateur de visualiser une \u00e9volution ou un stade pr\u00e9cis dans un processus. Voyons comment l&#039;int\u00e9grer et styler cet \u00e9l\u00e9ment. Quelques exemples d&#039;utilisation Avant de\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"Geoffrey Crofte\"\/>\n\t<meta name=\"keywords\" content=\"styler,progress,barre,progression,jauge,forms,html5,meter,w3c,veille technologique\" \/>\n\t<link rel=\"canonical\" href=\"https:\/\/www.creativejuiz.fr\/blog\/veille-technologique\/html5-element-progress-avancement-tache\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 4.9.8\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/veille-technologique\\\/html5-element-progress-avancement-tache#article\",\"name\":\"HTML5 : l\\u2019\\u00e9l\\u00e9ment progress, avancement d\\u2019une t\\u00e2che\",\"headline\":\"HTML5 : l&rsquo;\\u00e9l\\u00e9ment progress, avancement d&rsquo;une t\\u00e2che\",\"author\":{\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/auteur\\\/geoffrey#author\"},\"publisher\":{\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/#person\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/wp-content\\\/uploads\\\/2013\\\/08\\\/html5-progress.png\",\"width\":100,\"height\":100},\"datePublished\":\"2013-09-02T08:56:41+02:00\",\"dateModified\":\"2020-09-02T20:26:08+02:00\",\"inLanguage\":\"fr-FR\",\"commentCount\":4,\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/veille-technologique\\\/html5-element-progress-avancement-tache#webpage\"},\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/veille-technologique\\\/html5-element-progress-avancement-tache#webpage\"},\"articleSection\":\"Veille technologique, forms, HTML5, meter, progress, W3C, CreativeJuiz\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/veille-technologique\\\/html5-element-progress-avancement-tache#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog#listItem\",\"position\":1,\"name\":\"Accueil\",\"item\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/theme\\\/veille-technologique#listItem\",\"name\":\"Veille technologique\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/theme\\\/veille-technologique#listItem\",\"position\":2,\"name\":\"Veille technologique\",\"item\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/theme\\\/veille-technologique\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/veille-technologique\\\/html5-element-progress-avancement-tache#listItem\",\"name\":\"HTML5 : l&rsquo;\\u00e9l\\u00e9ment progress, avancement d&rsquo;une t\\u00e2che\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog#listItem\",\"name\":\"Accueil\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/veille-technologique\\\/html5-element-progress-avancement-tache#listItem\",\"position\":3,\"name\":\"HTML5 : l&rsquo;\\u00e9l\\u00e9ment progress, avancement d&rsquo;une t\\u00e2che\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/theme\\\/veille-technologique#listItem\",\"name\":\"Veille technologique\"}}]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/#person\",\"name\":\"Geoffrey Crofte\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/veille-technologique\\\/html5-element-progress-avancement-tache#personImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c9e2509009badcdf656faf5019ef0f567c4dd4e6e49beca151c21d23995db473?s=96&d=monsterid&r=g\",\"width\":96,\"height\":96,\"caption\":\"Geoffrey Crofte\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/auteur\\\/geoffrey#author\",\"url\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/auteur\\\/geoffrey\",\"name\":\"Geoffrey Crofte\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/veille-technologique\\\/html5-element-progress-avancement-tache#authorImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c9e2509009badcdf656faf5019ef0f567c4dd4e6e49beca151c21d23995db473?s=96&d=monsterid&r=g\",\"width\":96,\"height\":96,\"caption\":\"Geoffrey Crofte\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/veille-technologique\\\/html5-element-progress-avancement-tache#webpage\",\"url\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/veille-technologique\\\/html5-element-progress-avancement-tache\",\"name\":\"HTML5 : l\\u2019\\u00e9l\\u00e9ment progress, avancement d\\u2019une t\\u00e2che\",\"description\":\"L'\\u00e9l\\u00e9ment progress en HTML5 permet de visualiser l'avancement d'une t\\u00e2che. C'est un \\u00e9l\\u00e9ment encore assez m\\u00e9connu mais qui peut \\u00eatre pratique dans quelques cas o\\u00f9 vous avez besoin de permettre \\u00e0 l'utilisateur de visualiser une \\u00e9volution ou un stade pr\\u00e9cis dans un processus. Voyons comment l'int\\u00e9grer et styler cet \\u00e9l\\u00e9ment. Quelques exemples d'utilisation Avant de\",\"inLanguage\":\"fr-FR\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/veille-technologique\\\/html5-element-progress-avancement-tache#breadcrumblist\"},\"author\":{\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/auteur\\\/geoffrey#author\"},\"creator\":{\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/auteur\\\/geoffrey#author\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/wp-content\\\/uploads\\\/2013\\\/08\\\/html5-progress.png\",\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/veille-technologique\\\/html5-element-progress-avancement-tache\\\/#mainImage\",\"width\":100,\"height\":100},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/veille-technologique\\\/html5-element-progress-avancement-tache#mainImage\"},\"datePublished\":\"2013-09-02T08:56:41+02:00\",\"dateModified\":\"2020-09-02T20:26:08+02:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/\",\"name\":\"Creative Juiz\",\"description\":\"HTML5, CSS3, JavaScript, WordPress Tutorials\",\"inLanguage\":\"fr-FR\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/#person\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"HTML5 : l\u2019\u00e9l\u00e9ment progress, avancement d\u2019une t\u00e2che","description":"L'\u00e9l\u00e9ment progress en HTML5 permet de visualiser l'avancement d'une t\u00e2che. C'est un \u00e9l\u00e9ment encore assez m\u00e9connu mais qui peut \u00eatre pratique dans quelques cas o\u00f9 vous avez besoin de permettre \u00e0 l'utilisateur de visualiser une \u00e9volution ou un stade pr\u00e9cis dans un processus. Voyons comment l'int\u00e9grer et styler cet \u00e9l\u00e9ment. Quelques exemples d'utilisation Avant de","canonical_url":"https:\/\/www.creativejuiz.fr\/blog\/veille-technologique\/html5-element-progress-avancement-tache","robots":"max-image-preview:large","keywords":"styler,progress,barre,progression,jauge,forms,html5,meter,w3c,veille technologique","webmasterTools":{"miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.creativejuiz.fr\/blog\/veille-technologique\/html5-element-progress-avancement-tache#article","name":"HTML5 : l\u2019\u00e9l\u00e9ment progress, avancement d\u2019une t\u00e2che","headline":"HTML5 : l&rsquo;\u00e9l\u00e9ment progress, avancement d&rsquo;une t\u00e2che","author":{"@id":"https:\/\/www.creativejuiz.fr\/blog\/auteur\/geoffrey#author"},"publisher":{"@id":"https:\/\/www.creativejuiz.fr\/blog\/#person"},"image":{"@type":"ImageObject","url":"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2013\/08\/html5-progress.png","width":100,"height":100},"datePublished":"2013-09-02T08:56:41+02:00","dateModified":"2020-09-02T20:26:08+02:00","inLanguage":"fr-FR","commentCount":4,"mainEntityOfPage":{"@id":"https:\/\/www.creativejuiz.fr\/blog\/veille-technologique\/html5-element-progress-avancement-tache#webpage"},"isPartOf":{"@id":"https:\/\/www.creativejuiz.fr\/blog\/veille-technologique\/html5-element-progress-avancement-tache#webpage"},"articleSection":"Veille technologique, forms, HTML5, meter, progress, W3C, CreativeJuiz"},{"@type":"BreadcrumbList","@id":"https:\/\/www.creativejuiz.fr\/blog\/veille-technologique\/html5-element-progress-avancement-tache#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/www.creativejuiz.fr\/blog#listItem","position":1,"name":"Accueil","item":"https:\/\/www.creativejuiz.fr\/blog","nextItem":{"@type":"ListItem","@id":"https:\/\/www.creativejuiz.fr\/blog\/theme\/veille-technologique#listItem","name":"Veille technologique"}},{"@type":"ListItem","@id":"https:\/\/www.creativejuiz.fr\/blog\/theme\/veille-technologique#listItem","position":2,"name":"Veille technologique","item":"https:\/\/www.creativejuiz.fr\/blog\/theme\/veille-technologique","nextItem":{"@type":"ListItem","@id":"https:\/\/www.creativejuiz.fr\/blog\/veille-technologique\/html5-element-progress-avancement-tache#listItem","name":"HTML5 : l&rsquo;\u00e9l\u00e9ment progress, avancement d&rsquo;une t\u00e2che"},"previousItem":{"@type":"ListItem","@id":"https:\/\/www.creativejuiz.fr\/blog#listItem","name":"Accueil"}},{"@type":"ListItem","@id":"https:\/\/www.creativejuiz.fr\/blog\/veille-technologique\/html5-element-progress-avancement-tache#listItem","position":3,"name":"HTML5 : l&rsquo;\u00e9l\u00e9ment progress, avancement d&rsquo;une t\u00e2che","previousItem":{"@type":"ListItem","@id":"https:\/\/www.creativejuiz.fr\/blog\/theme\/veille-technologique#listItem","name":"Veille technologique"}}]},{"@type":"Person","@id":"https:\/\/www.creativejuiz.fr\/blog\/#person","name":"Geoffrey Crofte","image":{"@type":"ImageObject","@id":"https:\/\/www.creativejuiz.fr\/blog\/veille-technologique\/html5-element-progress-avancement-tache#personImage","url":"https:\/\/secure.gravatar.com\/avatar\/c9e2509009badcdf656faf5019ef0f567c4dd4e6e49beca151c21d23995db473?s=96&d=monsterid&r=g","width":96,"height":96,"caption":"Geoffrey Crofte"}},{"@type":"Person","@id":"https:\/\/www.creativejuiz.fr\/blog\/auteur\/geoffrey#author","url":"https:\/\/www.creativejuiz.fr\/blog\/auteur\/geoffrey","name":"Geoffrey Crofte","image":{"@type":"ImageObject","@id":"https:\/\/www.creativejuiz.fr\/blog\/veille-technologique\/html5-element-progress-avancement-tache#authorImage","url":"https:\/\/secure.gravatar.com\/avatar\/c9e2509009badcdf656faf5019ef0f567c4dd4e6e49beca151c21d23995db473?s=96&d=monsterid&r=g","width":96,"height":96,"caption":"Geoffrey Crofte"}},{"@type":"WebPage","@id":"https:\/\/www.creativejuiz.fr\/blog\/veille-technologique\/html5-element-progress-avancement-tache#webpage","url":"https:\/\/www.creativejuiz.fr\/blog\/veille-technologique\/html5-element-progress-avancement-tache","name":"HTML5 : l\u2019\u00e9l\u00e9ment progress, avancement d\u2019une t\u00e2che","description":"L'\u00e9l\u00e9ment progress en HTML5 permet de visualiser l'avancement d'une t\u00e2che. C'est un \u00e9l\u00e9ment encore assez m\u00e9connu mais qui peut \u00eatre pratique dans quelques cas o\u00f9 vous avez besoin de permettre \u00e0 l'utilisateur de visualiser une \u00e9volution ou un stade pr\u00e9cis dans un processus. Voyons comment l'int\u00e9grer et styler cet \u00e9l\u00e9ment. Quelques exemples d'utilisation Avant de","inLanguage":"fr-FR","isPartOf":{"@id":"https:\/\/www.creativejuiz.fr\/blog\/#website"},"breadcrumb":{"@id":"https:\/\/www.creativejuiz.fr\/blog\/veille-technologique\/html5-element-progress-avancement-tache#breadcrumblist"},"author":{"@id":"https:\/\/www.creativejuiz.fr\/blog\/auteur\/geoffrey#author"},"creator":{"@id":"https:\/\/www.creativejuiz.fr\/blog\/auteur\/geoffrey#author"},"image":{"@type":"ImageObject","url":"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2013\/08\/html5-progress.png","@id":"https:\/\/www.creativejuiz.fr\/blog\/veille-technologique\/html5-element-progress-avancement-tache\/#mainImage","width":100,"height":100},"primaryImageOfPage":{"@id":"https:\/\/www.creativejuiz.fr\/blog\/veille-technologique\/html5-element-progress-avancement-tache#mainImage"},"datePublished":"2013-09-02T08:56:41+02:00","dateModified":"2020-09-02T20:26:08+02:00"},{"@type":"WebSite","@id":"https:\/\/www.creativejuiz.fr\/blog\/#website","url":"https:\/\/www.creativejuiz.fr\/blog\/","name":"Creative Juiz","description":"HTML5, CSS3, JavaScript, WordPress Tutorials","inLanguage":"fr-FR","publisher":{"@id":"https:\/\/www.creativejuiz.fr\/blog\/#person"}}]}},"aioseo_meta_data":{"post_id":"3367","title":null,"description":"","keywords":[{"label":"styler","value":"styler"},{"label":"progress","value":"progress"},{"label":"barre","value":"barre"},{"label":"progression","value":"progression"},{"label":"jauge","value":"jauge"}],"keyphrases":null,"primary_term":null,"canonical_url":"","og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_url":null,"og_image_width":null,"og_image_height":null,"og_image_custom_url":null,"og_image_custom_fields":null,"og_video":null,"og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"","isEnabled":true},"graphs":[],"defaultGraph":"","defaultPostTypeGraph":""},"schema_type":null,"schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":null,"robots_max_videopreview":null,"robots_max_imagepreview":"large","priority":null,"frequency":null,"location":null,"local_seo":null,"breadcrumb_settings":null,"limit_modified_date":false,"ai":null,"created":"2020-12-21 17:18:12","updated":"2025-07-09 23:31:09","seo_analyzer_scan_date":null},"_links":{"self":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/3367","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/comments?post=3367"}],"version-history":[{"count":1,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/3367\/revisions"}],"predecessor-version":[{"id":7518,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/3367\/revisions\/7518"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/media\/3624"}],"wp:attachment":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/media?parent=3367"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/categories?post=3367"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/tags?post=3367"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/coauthors?post=3367"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}