TheDeveloperBlog.com

Home | Contact Us

C-Sharp | Java | Python | Swift | GO | WPF | Ruby | Scala | F# | JavaScript | SQL | PHP | Angular | HTML

HTML progress tag

HTML progress tag with examples, html5, forms, input, text, anchor, image, heading, marquee, textarea, paragraph, title, quotes, code etc.

<< Back to HTML

HTML Progress Tag

HTML <progress> tag is used to display the progress of a task. It provides an easy way for web developers to create progress bar on the website. It is mostly used to show the progress of a file uploading on the web page.

The HTML progress tag is new in HTML5 so you must use new browsers.

Attributes of HTML Progress Tag

HTML <progress> tag supports the global and event attributes as well as 2 specific attributes.

TagDescription
valueIt defines that how much work the task has been completed.
maxIt defines that how much work the task requires in total.

The progress tag should be used to represent progress of a task only, not for just a gauge (disk pace usage). For such purpose, <meter> element is used.

HTML Progress Tag Example

Let's see HTML progress example without attribute.

<progress></progress>
Test it Now

Output:

Let's see the progress example with value and max attributes.

Downloading progress:
<progress value="43" max="100"></progress>
Test it Now

Output:

Downloading progress:

Styling Progress Bar

You can apply CSS code on progress tag.

progress{
  width: 300px;
  height: 30px;
}
Test it Now

Output:

HTML Progress Tag with JavaScript

The <progress> tag should be used in conjunction with JavaScript to display the progress of a task.

<script>
var gvalue=1;
function abc(){
 var progressExample = document.getElementById ('progress-javascript-example');
     setInterval (function ()
    { 
                 if(gvalue<100){
                    gvalue++;
                    progressExample.value =gvalue;  
                  }
                 abc();            
      }, 1000);
}
</script>
<progress id="progress-javascript-example" min="1" max="100"></progress>  
<br/><br/>
<button onclick="abc()">click me</button>
Test it Now

Output:



Supporting Browsers

Elementchrome browser Chromeie browser IEfirefox browser Firefoxopera browser Operasafari browser Safari
<progress>YesYesYesYesYes
Next TopicHTML quotes Tag




Related Links:

.Net

.NET Array Dictionary List String 2D Async DataTable Dates DateTime Enum File For Foreach Format IEnumerable If IndexOf Lambda LINQ Parse Path Process Property Regex Replace Sort Split Static StringBuilder Substring Switch Tuple

Java

Core Array ArrayList HashMap String 2D Cast Character Console Deque Duplicates File For Format HashSet If IndexOf Lambda Math ParseInt Process Random Regex Replace Sort Split StringBuilder Substring Switch Vector While

Related Links

Adjectives Ado Ai Android Angular Antonyms Apache Articles Asp Autocad Automata Aws Azure Basic Binary Bitcoin Blockchain C Cassandra Change Coa Computer Control Cpp Create Creating C-Sharp Cyber Daa Data Dbms Deletion Devops Difference Discrete Es6 Ethical Examples Features Firebase Flutter Fs Git Go Hbase History Hive Hiveql How Html Idioms Insertion Installing Ios Java Joomla Js Kafka Kali Laravel Logical Machine Matlab Matrix Mongodb Mysql One Opencv Oracle Ordering Os Pandas Php Pig Pl Postgresql Powershell Prepositions Program Python React Ruby Scala Selecting Selenium Sentence Seo Sharepoint Software Spellings Spotting Spring Sql Sqlite Sqoop Svn Swift Synonyms Talend Testng Types Uml Unity Vbnet Verbal Webdriver What Wpf