Skip to main content

Adding Progress Tag in Html5 and CSS3.

By

This post is about adding Progress Tag in html.
The HTML progress tag specifies a completion progress of a task.
It is displayed as a progress bar.
The value of progressbar can be manipulated by using JavaScript.


Here is the implementation of the logic.
<!DOCTYPE html>
<html>
<head>

<title>HTML Progress Tag</title>

<script>
var pBar = document.getElementById('p');
var updateProgress = function(value)
{
pBar.value = value;
pBar.getElementsByTagName('span')[0].innerHTML = Math.floor((100 / 70) * value);
}
</script>

</head>
<body>
<progress id='p' max='70'> <span>0</span>%</progress>
</body>
</html>
Post any problem if encountered in the comments.
Thanks for visiting GIMIBITS.
Please share this post and like us on Facebook.

HITESH BHATIA
EDITOR IN CHIEF
Labels:

Comments

Post a Comment