Skip to content (Press Enter)

Likiipedia

| Digital Notebook

  • Home
  • Blog Posts
  • Code Samples
  • Open Source Team | Invitation
  • Contact Likii 📧
html 5 written on a purple background

How to make a progress bar without JavaScript

As we’re going trough fun new things HTML can do, we might come across progress bars which you can make without using JavaScript. In this exercise we’ll go trough everything you’ll need to create one of your own, and don’t worry, it’s super simple 😊

Table of contents:

  • What are progress bars
  • HTML progress Tag
  • HTML meter Tag

Let’s get started: What are progress bars?

These are used to mark progress, for example when you’re downloading something or are going trough a questionnaire and it’s showing you how far you’ve got.. They look something like this:

We’ll go trough two ways of making them but we’ll keep our styling to the basics 🤪

Let’s get onto it with our first example:

HTML <progress> Tag

This tag might look new!
It represents the completion progress of a task and it goes nicely with a <label> tag for best accessibility practices so keep that in mind 😊

How do we use it?

<label for="file">Downloading progress:</label>
<progress id="file" value="32" max="100"> 32% </progress>

In the example above we’ve set the ‘max’ and ‘value’ attributes to some numbers and we might wonder what these mean:

MAX attribute describes how much work the task indicated by the progress element requires. The max attribute, if present, must have a value greater than 0 and be a valid floating point number. The default value is 1.

VALUE attribute specifies how much of the task that has been completed. It must be a valid floating point number between 0 and max, or between 0 and 1 if max is omitted. If there is no value attribute, the progress bar is indeterminate; this indicates that an activity is ongoing with no indication of how long it is expected to take.

Please note:
Unlike the <meter> element, the minimum value is always 0, and the min attribute is not allowed for the <progress> element.

HTML <meter> Tag

Another option you could look at would be <meter> element which has a little bit more to offer in terms of attributes it comes with so let’s have a look at them:

<label for='download-one'> Download 1: </label>
<meter id='download-one' value='2' min='0' max='10'> 2 our of 10 </meter>

<label for='download-two'> Download 2: </label>
<meter id='download-two' value='0.6'> 60% </meter>

The <meter> element represents a value within a known range (example called ‘Download 1’) or a fractional value (example called ‘Download 2’). Let’s go trough the attributes used and explain what they are:

VALUE: The current numeric value. This must be between the minimum and maximum values (min attribute and max attribute) if they are specified. If unspecified or malformed, the value is 0. If specified, but not within the range given by the min attribute and max attribute, the value is equal to the nearest end of the range.

MIN: The lower numeric bound of the measured range. This must be less than the maximum value (max attribute), if specified. If unspecified, the minimum value is 0.

MAX: The upper numeric bound of the measured range. This must be greater than the minimum value (min attribute), if specified. If unspecified, the maximum value is 1.

There are a couple of other attributes you could find used with <meter> element and those would be ‘high’, ‘low’, ‘optimum’ and ‘form’ which you can find more about on MDN Web Docs.

Both of our examples are pretty easy to style but beware, they might not work everywhere
– looking at you IE 🤪

Related Projects

creating an apple with only css

How to make an apple with only CSS

August 14, 2021
creating a 2d piggy with css

How to make a 2D Piggy with CSS

August 14, 2021
node js written on a grass green background

Module Exports in Node.js | Variables & Functions

August 22, 2020

Categories

  • Fundamentals (4)
  • HTML & CSS (1)
  • Junior Developer Group (2)
  • Let's Discuss (3)
  • Tools & Projects (1)
  • Uncategorized (1)
  • Vue.js (3)
  • WooCommerce (1)

Check out my newest Vue project 💚

a piggy made with css

Contact Likii 📧

Hi there! 👋 If you’d like to contact me outside of social media and want to have a chat about projects you’d like to see featured on the blog, collaboration enquiries and anything in between – you can use this form! 💛

Take me to contact form
Created by Likii.