Learn to Code via Tutorials on Repl.it!

← Back to all posts
The Basic Guide To Creating a Simple Progress Bar.
Minikeyboard (28)

Hey fellow coders, out of cool ideas? Well here is a cool thing!

Table of content:

  • Basics
  • How to revamp it into a nice thing
  • What you can use it for.

Let's get started!

👉🏼What are the Basics?

Its as simple as we put it! It is just a tag.

You can structure it like this: <progress>

This tag allows you to make a simple progress bar. This can be useful for making a game or cool websites :D
Here is the basic structure for the <progress> tag:

👉🏼 So, how do I use it?

Now that you know the basic, lets get started with the harder part. Be ready to get surprised!

  1. Ok, we have our progress: <progress>
  2. Now we have to go in it and add the value! <progress value="Anything you want here eg. 100">
  3. Wait wait, wait! Before you complain that it doesn't work, you have to add the max value.
  4. Here add this: max="100"></progress>
  5. It should look like this: <progress value="50" max="100"></progress> (This Example makes it 50%

👉🏼 Wait, wait, wait! Now that you know, lets do some cool ideas!

My first idea is a step by step page, like creating an account :)

Here is how it looks


I have many ideas! But some you must find out yourself :)

Hope you enjoyed
-Mini was here

Minikeyboard (28)

Thanks for stumbling across my tutorial, leave an upvote!