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

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

https://wrongposhintelligence.minikeyboard.repl.co/

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

Hope you enjoyed
-Mini was here

Voters
Profile icon
DigitCommander
Profile icon
staps
Profile icon
Minilofe
Comments
hotnewtop
Profile icon
staps

Nice.

Profile icon
Minilofe

Thanks for stumbling across my tutorial, leave an upvote!

Profile icon
staps

@Minikeyboard Did it the first thing.