Skip to content
← Back to Community
The Basic Guide To Creating a Simple Progress Bar.
Profile icon

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 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

Profile icon
Profile icon
Profile icon
Profile icon


Profile icon

Thanks for stumbling across my tutorial, leave an upvote!

Profile icon

@Minikeyboard Did it the first thing.