Table of Contents
Attributes
Methods to Create Progress Bar in HTML
1. Using CSS
2. Using Box Shadows and Colors
3. Using Span
4. Using JavaScript Example
Conclusion
Home Web Front-end HTML Tutorial HTML Progress Bar

HTML Progress Bar

Sep 04, 2024 pm 04:47 PM
html html5 HTML Tutorial HTML Properties HTML tags

The W3C standard dictates that the progress bar completes a specific task using a progress element. Developers use the progress tag to display a progress bar and represent file uploading progress on web pages. HTML incorporates this tag, offering web developers a straightforward method to display the bar. This tag is entirely different from the tag, representing disk space usage. And It is supported in HTML5, and the constant growth of HTML5 helps to introduce an interesting tool.

Syntax:

This progress element has both the starting and ending tag, and below shows the tag’s basic syntax. It implies the status of any process. The progress bar has inline display manners.

1

2

3

<Progress bar>

……

</Progress bar>

Copy after login

Attributes

Attributes provide an informative element like the behavior of the explorer in the HTML. There are three attributes in the HTML: event attributes and global attributes. In addition to these attributes, the progress element has two new attributes:

max – The default value is 1.0 and indicates the total number of works needed to complete the task.

value – This specifies how much work has to be finished. The default value is assigned as less than 1.0. In the absence of the Val attribute, the progress bar is indeterminate.

Examples of progress bars include attaching a file, loading the document for the first time, or a web page loading.

Methods to Create Progress Bar in HTML

A progress bar has two different states: determinate and indeterminate. In the case of the indeterminate progress bar, you assign a null value to the value attribute, which makes it easier to style. On the other hand, for the determinate state, you define two new attributes, max, and value, as shown in the examples below. It uses some motion-like appearance to indicate the task with the horizontal bar. If the respective work is not depending on the task, then the < meter> tag is assigned. Regarding browser compatibility, it supports all browsers except Internet Explorer (partial support). Depending upon the browser compatibility progress bar may look different. This article will concentrate on the bar’s determinate state with max and Val attributes.

Example: Now, let’s look out for the basic implementation of a progress bar with min and val attributes.

1

2

3

4

5

6

7

8

9

<!DOCTYPE html>

<html>

<body>

Downloading on process:

<progress value="19" max="90">

</progress>

<p><strong>Note:</strong> The progress tag is used to represent a progress bar for quite period of time. </p>

</body>

</html>

Copy after login

Output:

HTML Progress Bar

1. Using CSS

Next, we shall see how to make a stylish progress bar look consistent on all platforms. To markup the progress bar, we use a value selector and adjust the dimensions, such as the width and height of the progress element, to create a visually appealing progress bar. However, dealing with different browsers can complicate this process. The browser makes some adjustments to the caliber of the task completion. We are making html bar look candid by applying the dimensional effect.

Example:

1

2

3

4

5

6

7

8

9

10

11

12

<!DOCTYPE>

<html>

<head>

<h1> Using Style Sheet in Progress bar </h1>

<style>

progress{width:400px;height:40px}

</style>

</head>

<body>

<progress value="60" max="100"></progress>

</body>

</html>

Copy after login

Output:

HTML Progress Bar

2. Using Box Shadows and Colors

With the stylesheet, we can add style rules to this element by giving background color, assigning height, etc. The colors can be applied by applying the rgba() function. The progress bar element can be done with different colors to display the result good. This is mapped with the attribute’ class’. Generally, the progress bar moves from left to right to indicate the task as they start from the initial ‘0’ and displays the results once it reaches the target.

Example:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

<!DOCTYPE>

<html>

<head>

<h1> Using Style Sheet in Progress bar demo </h1>

<style>

progress{width:200px;height:20px;background-color:pink;

border-radius: 4px;position: absolute;

right: 0px;

top: 80px;

box-shadow: 0 3px 6px rgba(255, 255, 0, 255) inset;}

</style>

</head>

<body>

<progress value="40" max="100"></progress>

</body>

</html>

Copy after login

Output:

HTML Progress Bar

Note: Different browser handles the bar a bit variants. Chrome uses Webkit Stylesheet by replacing native styles.

Sample:

progress bar :: – WebKit-Progress-bar

Even a progress bar size can be varied with small, medium, and large using the class attribute.

3. Using Span

The code below is indeterminate, showing some process is going on for a time.

Example:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

<!DOCTYPE>

<html>

<head>

<h1> Using Style Sheet in Progress bar </h1>

<style>

progress{width:120px;height:20px}

</style>

</head>

<body>

<progress max="100">

<span>20</span>%

</progress>

</body>

</html>

Copy after login

Output:

HTML Progress Bar

4. Using JavaScript Example

The following rules have to be done using javascript. Creating

element if needed and next creating a style sheet, finally embedding them together. The below code shows the basic progress bar with JavaScript.

Example #1

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

<!DOCTYPE>

<html>

<body>

<script>

var pgx=2;

function bar(){

var prog = document.getElementById ('progress demo');

setInterval (function ()

{

if(pgx<90){

pgx++;

prog.value =pgx;

}

bar();

}, 100);

}

</script>

<progress id="progress demo" min="2" max="100"></progress>

<br/><br/>

<button onclick="bar()"> submit</button>

</body>

</html>

Copy after login

Output:

HTML Progress Bar

Example #2

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

<!DOCTYPE html>

<html lang="en">

<head>

<title>implementation of HTML progress Tag</title>

</head>

<body>

<h2> <i>Task in scheduled Progress </i></h2>

<p>Process: <progress id="bar" value="1" max="100"><span>0</span>%</progress></p>

<script type="text/javascript">

var k = 0;

var progb = document.getElementById("bar");

function count(){

if(k < 100){

k = k + 1;

progb.value = k;

progb.getElementsByTagName("span")[0].textContent = k;

}

setTimeout("count()", 400);

}

count();

</script>

</body>

</html>

Copy after login

Output:

HTML Progress Bar

NOTE: Even you can add some animation effects to the progress bar. To do so, we have to assign some interval timings by assigning some value to it and directing incrementing infinitely, to make the situation control conditional statement used.

Conclusion

Therefore, this article explains how to create a highly flexible and lightweight HTML progress bar. Finally, we have briefly seen the concept as the activity indicator. This element indicates how to load a page or make some registration process and probably represents a percentage of 100 for the max value. When the length of the time task is unknown, developers usually use this mode in the installation or loading page scenario. And that’s even an implementation using Html5 with some cool effects.

The above is the detailed content of HTML Progress Bar. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial
1655
14
PHP Tutorial
1253
29
C# Tutorial
1227
24
Table Border in HTML Table Border in HTML Sep 04, 2024 pm 04:49 PM

Guide to Table Border in HTML. Here we discuss multiple ways for defining table-border with examples of the Table Border in HTML.

Nested Table in HTML Nested Table in HTML Sep 04, 2024 pm 04:49 PM

This is a guide to Nested Table in HTML. Here we discuss how to create a table within the table along with the respective examples.

HTML margin-left HTML margin-left Sep 04, 2024 pm 04:48 PM

Guide to HTML margin-left. Here we discuss a brief overview on HTML margin-left and its Examples along with its Code Implementation.

HTML Table Layout HTML Table Layout Sep 04, 2024 pm 04:54 PM

Guide to HTML Table Layout. Here we discuss the Values of HTML Table Layout along with the examples and outputs n detail.

HTML Input Placeholder HTML Input Placeholder Sep 04, 2024 pm 04:54 PM

Guide to HTML Input Placeholder. Here we discuss the Examples of HTML Input Placeholder along with the codes and outputs.

HTML Ordered List HTML Ordered List Sep 04, 2024 pm 04:43 PM

Guide to the HTML Ordered List. Here we also discuss introduction of HTML Ordered list and types along with their example respectively

HTML onclick Button HTML onclick Button Sep 04, 2024 pm 04:49 PM

Guide to HTML onclick Button. Here we discuss their introduction, working, examples and onclick Event in various events respectively.

Moving Text in HTML Moving Text in HTML Sep 04, 2024 pm 04:45 PM

Guide to Moving Text in HTML. Here we discuss an introduction, how marquee tag work with syntax and examples to implement.

See all articles