{"id":5473,"date":"2024-08-27T20:36:48","date_gmt":"2024-08-27T20:36:48","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/utilisation-progress-mozilla-firefox-html\/"},"modified":"2024-08-27T20:36:51","modified_gmt":"2024-08-27T20:36:51","slug":"utilisation-progress-mozilla-firefox-html","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/utilisation-progress-mozilla-firefox-html\/","title":{"rendered":"11.10 Utilisation de Progress pour Firefox en HTML"},"content":{"rendered":"\n<p><strong>Utilisation de Progress pour Firefox en HTML<\/strong> est un sujet int\u00e9ressant pour am\u00e9liorer l&rsquo;exp\u00e9rience utilisateur en fournissant des indications visuelles sur les \u00e9tapes accomplies dans un processus ou le statut d&rsquo;une action en cours. Apprendre \u00e0 utiliser la balise <strong>&lt;progress&gt;<\/strong> dans vos projets peut consid\u00e9rablement am\u00e9liorer la r\u00e9activit\u00e9 et l&rsquo;interactivit\u00e9 de vos applications web. Explorons comment cela fonctionne avec des exemples concrets de code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 <strong>&lt;progress&gt;<\/strong> pour Firefox<\/h2>\n\n\n\n<div id=\"videoContainer\" style=\"position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; background: #000;\">\n  <iframe src=\"https:\/\/player.vimeo.com\/video\/586679808?dnt=1&#038;fullscreen=0&#038;pip=0\" loading=\"lazy\" loading=\"lazy\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" frameborder=\"0\" allow=\"autoplay\" allowfullscreen id=\"vimeoPlayer\"><\/iframe>\n  \n  <!-- Popup Desktop -->\n  <div id=\"popupContainer\" class=\"desktop-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 400px; padding: 20px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <h2 style=\"color: #333; font-size: 1.5em; margin: 10px 0;\" id=\"profitez-de-loffre-spciale-\">Profitez de l\u2019offre sp\u00e9ciale !<\/h2>\n    <p style=\"color: #e74c3c; font-size: 1.2em; margin: 10px 0;\">Obtenez notre cours pour seulement <strong id=\"price\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\" target=\"_blank\" style=\"display: block; padding: 10px 20px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 1em; margin: 20px auto;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 10px 20px; font-size: 1em;\">Fermer<\/button>\n  <\/div>\n\n  <!-- Popup Mobile -->\n  <div id=\"popupContainerMobile\" class=\"mobile-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; max-width: 300px; padding: 15px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <p style=\"color: #e74c3c; font-size: 1em; margin: 5px 0;\">Cours sp\u00e9cial \u00e0 <strong id=\"priceMobile\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\" target=\"_blank\" style=\"display: inline-block; padding: 8px 15px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 0.9em;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 5px 10px; font-size: 0.9em;\">Fermer<\/button>\n  <\/div>\n<\/div>\n\n<script src=\"https:\/\/player.vimeo.com\/api\/player.js\"><\/script>\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n    var iframe = document.getElementById('vimeoPlayer');\n    var player = new Vimeo.Player(iframe);\n    var isPopupDisplayed = false;\n\n    player.on('play', function() {\n        if (!isPopupDisplayed) {\n            player.on('timeupdate', function(data) {\n                if (data.seconds >= 120 && !isPopupDisplayed) { \/\/ 120 seconds = 2 minutes\n                    \/\/ Pause the video and display the popup\n                    player.pause().then(function() {\n                        if (window.innerWidth > 768) {\n                            document.querySelector('.desktop-popup').style.display = 'block';\n                        } else {\n                            document.querySelector('.mobile-popup').style.display = 'block';\n                        }\n                        fetchPriceAndUpdatePopup();\n                        isPopupDisplayed = true;\n                    });\n                }\n            });\n        }\n    });\n\n    function fetchPriceAndUpdatePopup() {\n        fetch('https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-python\/144')\n            .then(response => response.text())\n            .then(html => {\n                var parser = new DOMParser();\n                var fetchedDoc = parser.parseFromString(html, 'text\/html');\n                var priceElement = fetchedDoc.querySelector('.ammount .fw-500');\n                var originalPriceElement = fetchedDoc.querySelector('.ammount del');\n                var price = priceElement ? priceElement.textContent.trim() : '29.5\u20ac';\n                var originalPrice = originalPriceElement ? originalPriceElement.textContent.trim() : '59\u20ac';\n\n                document.getElementById('price').textContent = price;\n                document.getElementById('priceMobile').textContent = price;\n                document.querySelector('.desktop-popup del').textContent = originalPrice;\n                document.querySelector('.mobile-popup del').textContent = originalPrice;\n            })\n            .catch(error => console.error('Error fetching the price:', error));\n    }\n\n    function closePopup() {\n        document.querySelector('.desktop-popup').style.display = 'none';\n        document.querySelector('.mobile-popup').style.display = 'none';\n        player.play(); \/\/ Allows resuming the video only after closing the popup\n    }\n});\n<\/script>\n\n\n\n<p>La balise <code>&lt;progress&gt;<\/code> en HTML est utilis\u00e9e pour repr\u00e9senter l&rsquo;avancement d&rsquo;une t\u00e2che longue ou d&rsquo;un processus continu. Elle affiche un barom\u00e8tre de progression qui peut \u00eatre mis \u00e0 jour dynamiquement. La balise est compatible avec la plupart des navigateurs modernes, y compris Firefox.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Cr\u00e9er une Barre de Progression<\/h3>\n\n\n\n<p>Pour commencer, ins\u00e9rez la balise <code>&lt;progress&gt;<\/code> dans votre fichier HTML. Vous pouvez d\u00e9finir les attributs <code>max<\/code> et <code>value<\/code> pour sp\u00e9cifier la valeur actuelle et la valeur maximale de la progression.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;progress value=\"32\" max=\"100\"&gt;&lt;\/progress&gt;<\/code><\/pre>\n\n\n\n<p>Dans cet exemple, la barre de progression est \u00e0 32% de son maximum. Vous pouvez, bien s\u00fbr, personnaliser ces valeurs en fonction de vos besoins. Pour plus de d\u00e9tails sur les valeurs des attributs, consultez notre guide sur <a href=\"https:\/\/wikiform.fr\/codespace\/element-html-head-tout-savoir\" title=\"\u00e9l\u00e9ment hhtml head tout savoir\" target=\"_blank\" rel=\"noopener\">\u00c9l\u00e9ment HTML &#60;head&#62;: Tout Savoir<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Mettre \u00e0 Jour la Barre de Progression via JavaScript<\/h3>\n\n\n\n<p>Pour rendre la barre de progression dynamique, vous devrez utiliser JavaScript. Voici comment vous pouvez modifier la valeur de la balise <code>&lt;progress&gt;<\/code> en r\u00e9ponse \u00e0 diff\u00e9rents \u00e9v\u00e9nements ou actions de l&rsquo;utilisateur :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;progress id=\"progressBar\" value=\"0\" max=\"100\"&gt;&lt;\/progress&gt;\n\n&lt;script&gt;\n  function updateProgress(value) {\n    var progressBar = document.getElementById('progressBar');\n    progressBar.value = value;\n  }\n\n  \/\/ Exemple d'utilisation\n  updateProgress(70); \/\/ Mettre \u00e0 jour la barre de progression \u00e0 70%\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Ajouter du Texte de Progression<\/h3>\n\n\n\n<p>Pour une meilleure exp\u00e9rience utilisateur, il est souvent utile d&rsquo;ajouter du texte qui indique la progression actuelle. Voici un exemple qui montre comment adapter le texte avec la progression de la barre :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;progress id=\"progressBar\" value=\"0\" max=\"100\"&gt;&lt;\/progress&gt;\n&lt;span id=\"progressText\"&gt;0%&lt;\/span&gt;\n\n&lt;script&gt;\n  function updateProgress(value) {\n    var progressBar = document.getElementById('progressBar');\n    var progressText = document.getElementById('progressText');\n    progressBar.value = value;\n    progressText.textContent = value + '%';\n  }\n\n  \/\/ Exemple d'utilisation\n  updateProgress(50); \/\/ Mettre \u00e0 jour la barre de progression \u00e0 50%\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Style Personnalis\u00e9 de la Barre de Progression<\/h3>\n\n\n\n<p>Pour am\u00e9liorer l&rsquo;esth\u00e9tique de votre barre de progression, vous pouvez appliquer des styles CSS. Voici un exemple simple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;style&gt;\n  progress {\n    width: 100%;\n    height: 20px;\n    border-radius: 5px;\n    overflow: hidden;\n  }\n\n  progress::-webkit-progress-bar {\n    background-color: #f3f3f3;\n  }\n\n  progress::-webkit-progress-value {\n    background-color: #4caf50;\n  }\n\n  progress::-moz-progress-bar {\n    background-color: #4caf50;\n  }\n&lt;\/style&gt;\n\n&lt;progress id=\"progressBar\" value=\"0\" max=\"100\"&gt;&lt;\/progress&gt;\n&lt;span id=\"progressText\"&gt;0%&lt;\/span&gt;\n\n&lt;script&gt;\n  function updateProgress(value) {\n    var progressBar = document.getElementById('progressBar');\n    var progressText = document.getElementById('progressText');\n    progressBar.value = value;\n    progressText.textContent = value + '%';\n  }\n\n  \/\/ Exemple d'utilisation\n  updateProgress(80); \/\/ Mettre \u00e0 jour la barre de progression \u00e0 80%\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser la Barre de Progression pour Suivre L&rsquo;avancement d&rsquo;un T\u00e9l\u00e9chargement<\/h3>\n\n\n\n<p>Voici un exemple plus complet qui montre comment utiliser la balise <code>&lt;progress&gt;<\/code> pour afficher l&rsquo;avancement d&rsquo;un t\u00e9l\u00e9chargement de fichier :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;progress id=\"progressBar\" value=\"0\" max=\"100\"&gt;&lt;\/progress&gt;\n&lt;span id=\"progressText\"&gt;0%&lt;\/span&gt;\n\n&lt;button onclick=\"startDownload()\"&gt;T\u00e9l\u00e9charger&lt;\/button&gt;\n\n&lt;script&gt;\n  function startDownload() {\n    var xhr = new XMLHttpRequest();\n    xhr.open('GET', 'https:\/\/via.placeholder.com\/600x400', true);\n    xhr.responseType = 'blob';\n\n    xhr.onprogress = function(event) {\n      if (event.lengthComputable) {\n        var percentComplete = (event.loaded \/ event.total) * 100;\n        updateProgress(Math.round(percentComplete));\n      }\n    };\n\n    xhr.onloadstart = function() {\n      updateProgress(0);\n    };\n\n    xhr.onload = function() {\n      updateProgress(100);\n      var url = URL.createObjectURL(xhr.response);\n      var a = document.createElement('a');\n      a.href = url;\n      a.download = 'image.png';\n      document.body.appendChild(a);\n      a.click();\n      document.body.removeChild(a);\n    };\n\n    xhr.send();\n  }\n\n  function updateProgress(value) {\n    var progressBar = document.getElementById('progressBar');\n    var progressText = document.getElementById('progressText');\n    progressBar.value = value;\n    progressText.textContent = value + '%';\n  }\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p>Dans cet exemple, un t\u00e9l\u00e9chargement est initi\u00e9 lorsque l&rsquo;utilisateur clique sur le bouton. La barre de progression et le texte sont mis \u00e0 jour en utilisant les \u00e9v\u00e9nements de progression de l&rsquo;objet XMLHttpRequest.<\/p>\n\n\n\n<p>En poursuivant votre exploration de la balise <code>&lt;progress&gt;<\/code>, vous pouvez \u00e9galement consulter des ressources externes pour \u00e9largir votre compr\u00e9hension. Par exemple, le <a href=\"https:\/\/developer.mozilla.org\/fr\/\" target=\"_blank\" rel=\"noopener\">site MDN Web Docs<\/a> offre une documentation d\u00e9taill\u00e9e sur la balise <code>&lt;progress&gt;<\/code> et d&rsquo;autres \u00e9l\u00e9ments HTML, et le <a href=\"https:\/\/www.w3schools.com\/\" target=\"_blank\" rel=\"noopener\">site W3Schools<\/a> propose des tutoriels pratiques et interactifs.<\/p>\n\n\n\n<p>Pour enrichir vos projets web, d\u00e9couvrez \u00e9galement comment <a href=\"https:\/\/wikiform.fr\/codespace\/creer-premiere-page-html-tutoriel-facile\" title=\"Cr\u00e9er votre premi\u00e8re page HTML\">cr\u00e9er votre premi\u00e8re page HTML<\/a> et utiliser les <a href=\"https:\/\/wikiform.fr\/codespace\/commentaires-html-utilisation\" title=\"Commentaires en HTML\">commentaires en HTML<\/a>. Ma\u00eetriser ces concepts vous permettra de structurer efficacement votre code et d&rsquo;am\u00e9liorer la lisibilit\u00e9 de vos projets.<\/p>\n\n\n\n<p>Le gestion de la couleur et de la transparence dans le CSS est \u00e9galement cruciale pour le design des barres de progression. Consultez notre <a href=\"https:\/\/wikiform.fr\/codespace\/couleur-transparence-texte-css-guide\" title=\"Guide sur les couleurs et la transparence CSS\">guide sur les couleurs et la transparence CSS<\/a> pour en savoir plus.<\/p>\n\n\n\n<p>D\u00e9couvrez \u00e9galement une autre m\u00e9thode pour positionner pr\u00e9cis\u00e9ment vos \u00e9l\u00e9ments \u00e0 l&rsquo;aide du CSS en suivant notre guide sur la <a href=\"https:\/\/wikiform.fr\/codespace\/positionner-elements-css-precisement\" title=\"Position des \u00e9l\u00e9ments CSS\">position des \u00e9l\u00e9ments CSS<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Utiliser la balise <strong>&lt;progress&gt;<\/strong> dans Firefox et d&rsquo;autres navigateurs modernes est une technique efficace pour am\u00e9liorer l&rsquo;exp\u00e9rience utilisateur en visualisant des \u00e9tapes de progression ou de processus. Gr\u00e2ce \u00e0 des exemples concrets et l&rsquo;utilisation de JavaScript, vous pouvez cr\u00e9er des \u00e9l\u00e9ments interactifs et dynamiques qui enrichissent votre application web. Continuez \u00e0 explorer les possibilit\u00e9s offertes par le HTML et JavaScript pour ma\u00eetriser davantage de fonctionnalit\u00e9s avanc\u00e9es.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-web\/147\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-WEB-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation Web Offre 50%\" title=\"\"><\/a>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-HTML-ET-CSS-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation HTML et CSS Offre 50%\" title=\"\"><\/a>\n","protected":false},"excerpt":{"rendered":"<p>Utilisation de Progress pour Firefox en HTML est un sujet int\u00e9ressant pour am\u00e9liorer l&rsquo;exp\u00e9rience utilisateur en fournissant des indications visuelles sur les \u00e9tapes accomplies dans&#8230;<\/p>\n","protected":false},"author":2,"featured_media":2786,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3,8],"tags":[18],"class_list":["post-5473","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-3-css","category-2-html","tag-tutoriels"],"acf":[],"_titre_de_la_formation":null,"_description_":null,"_objectifs_pedagogiques":null,"_programme_":null,"_url_de_limage":null,"_materiel_necessaire":null,"_modalites_devaluation_des_acquis":null,"_moyens_pedagogiques_et_techniques":null,"_accessibilite_":null,"_formateur_":null,"menu_order":0,"_links":{"self":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5473","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/comments?post=5473"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5473\/revisions"}],"predecessor-version":[{"id":5474,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5473\/revisions\/5474"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2786"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5473"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5473"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5473"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}