{"id":28751,"date":"2024-04-06T16:12:20","date_gmt":"2024-04-06T15:12:20","guid":{"rendered":"https:\/\/nelkodev.com\/blog\/guia-completa-para-crear-una-barra-de-progreso-dinamica-con-javascript\/"},"modified":"2024-06-03T17:42:16","modified_gmt":"2024-06-03T16:42:16","slug":"guia-completa-para-crear-una-barra-de-progreso-dinamica-con-javascript","status":"publish","type":"post","link":"https:\/\/nelkodev.com\/en\/blog\/complete-guide-to-create-a-dynamic-progress-bar-with-javascript\/","title":{"rendered":"Complete Guide to Create a Dynamic Progress Bar with JavaScript"},"content":{"rendered":"<p>A progress bar is an essential component in any user interface that involves tasks whose completion time may be indeterminate or long. Implementing one from scratch may sound complex, but with pure JavaScript it is quite accessible and an excellent practice to strengthen programming skills. In this detailed guide, I will show you how to create a dynamic progress bar using only HTML, CSS and JavaScript, without the need for external libraries or frameworks.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_80 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #ffffff;color:#ffffff\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #ffffff;color:#ffffff\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewbox=\"0 0 24 24\" version=\"1.2\" baseprofile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nelkodev.com\/en\/blog\/complete-guide-to-create-a-dynamic-progress-bar-with-javascript\/#Comenzando_con_el_Marcado_HTML\" >Getting started with HTML Markup<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nelkodev.com\/en\/blog\/complete-guide-to-create-a-dynamic-progress-bar-with-javascript\/#Estilizando_con_CSS\" >Styling with CSS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nelkodev.com\/en\/blog\/complete-guide-to-create-a-dynamic-progress-bar-with-javascript\/#Funcionalidad_JavaScript\" >JavaScript functionality<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nelkodev.com\/en\/blog\/complete-guide-to-create-a-dynamic-progress-bar-with-javascript\/#Implementando_la_Barra_de_Progreso_en_un_Proyecto_Real\" >Implementing the Progress Bar in a Real Project<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nelkodev.com\/en\/blog\/complete-guide-to-create-a-dynamic-progress-bar-with-javascript\/#Mejoras_y_Personalizaciones\" >Improvements and Customizations<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Comenzando_con_el_Marcado_HTML\"><\/span>Getting started with HTML Markup<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>First, we need to structure our HTML to give our progress bar a place on the web page. The code below shows how we can do this with a container for the bar and the progress bar itself:<\/p>\n<pre><code class=\"&quot;language-html&quot;\">&lt;div id=&quot;progressBarContainer&quot; style=&quot;width: 100%; background-color: #e0e0e0;&quot;&gt;\n  &lt;div id=&quot;progressBar&quot; style=&quot;width: 0%; height: 30px; background-color: #5ca08e;&quot;&gt;\n  &lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<p>Here, <code>progressBarContainer<\/code> is a div that acts as the container for the progress bar and <code>progressBar<\/code> is another div that represents the progress bar itself. Inline styles are just for simplification, but we recommend moving them to a stylesheet for better organization and maintenance.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Estilizando_con_CSS\"><\/span>Styling with CSS<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>To make sure our progress bar looks good, let&#039;s add some CSS. You can place the following code in your CSS styles file:<\/p>\n<pre><code class=\"&quot;language-css&quot;\">#progressBarContainer { width: 100%; background-color: #e0e0e0; } #progressBar { width: 0; height: 30px; background-color: #5ca08e; transition: width 0.4s ease; }<\/code><\/pre>\n<p>He <code>transition<\/code> added to <code>#progressBar<\/code> will make changes to the width of the progress bar smooth and visual.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Funcionalidad_JavaScript\"><\/span>JavaScript functionality<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Now, we need to bring our progress bar to life with JavaScript. The following script gradually increases the width of the progress bar until a specified value is reached. This simulates the loading of a task over time.<\/p>\n<pre><code class=\"&quot;language-javascript&quot;\">function updateProgressBar(progressValue) { const progressBar = document.getElementById(&#039;progressBar&#039;); progressBar.style.width = progressValue + &#039;%&#039;; } function simulateProgress() { let progress = 0; const interval = setInterval(() =&gt; { if (progress &gt;= 100) { clearInterval(interval); } else { progress++; updateProgressBar(progress); } }, 100); } simulateProgress();<\/code><\/pre>\n<p>The function <code>updateProgressBar<\/code> update the width of <code>#progressBar<\/code> based on the value passed to <code>progressValue<\/code>. The function <code>simulateProgress<\/code> simulates progress. Every 100 milliseconds, increment the value of <code>progress<\/code> until it reaches 100%, at which point it stops the interval.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Implementando_la_Barra_de_Progreso_en_un_Proyecto_Real\"><\/span>Implementing the Progress Bar in a Real Project<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>You can integrate this progress bar into any project that requires viewing the progress of a load or task. You can tie the increment of the bar to real events in your applications, such as file uploads, data processing on the server, or any task whose duration can be monitored in some way.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Mejoras_y_Personalizaciones\"><\/span>Improvements and Customizations<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Although the example provides a solid foundation, you can always improve and customize the progress bar:<\/p>\n<ul>\n<li><strong>Stylization<\/strong>: Change colors, heights or animations to match the style of your website.<\/li>\n<li><strong>Interactivity<\/strong>: Add messages that inform the user about the current status of the process or indicate the completion of the task.<\/li>\n<li><strong>Optimization<\/strong>: Implement controls to manage multiple progress bars or to interact with them in more complex ways.<\/li>\n<\/ul>\n<p>Building UI components from scratch is a great way to better understand how they work and how they can be customized to fit the specific needs of your project. If you have questions or need help with your projects, feel free to visit <a href=\"https:\/\/nelkodev.com\/en\/contact\/\">my contact page<\/a>.<\/p>\n<p>I hope this guide has been useful to you in creating your own progress bar and inspires you to continue exploring the possibilities that JavaScript and web development in general have to offer. Happy coding!<\/p>","protected":false},"excerpt":{"rendered":"<p>A progress bar is an essential component in any user interface that involves tasks whose completion time may be indeterminate or long. Implementing one from scratch may sound complex, but with pure JavaScript it is quite accessible and a great practice to strengthen programming skills. In this detailed guide, I will show you how to [\u2026]<\/p>","protected":false},"author":1,"featured_media":28752,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[420,1901],"tags":[1927,205,500,90,340,1014,358,185,60,1928,627,1008,37],"class_list":["post-28751","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-pruebas-de-proyecto","tag-barra","tag-blog","tag-completa","tag-con","tag-crear","tag-dinamica","tag-guia","tag-javascript","tag-para","tag-progreso","tag-proyecto","tag-pruebas","tag-una"],"_links":{"self":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/28751","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/comments?post=28751"}],"version-history":[{"count":0,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/28751\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media\/28752"}],"wp:attachment":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media?parent=28751"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/categories?post=28751"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/tags?post=28751"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}