Guide to Progress Bars

Base

The Bootstrap documentation focuses on HTML. To translate to BBCode, ignore all the role, style, aria, ID, and other info - to my knowledge, we have no ability to add that ourselves. Focus instead on how div means container, and the class name is what you'd name that container.
 

Result

In order for the progress bar to be visible, you need to specify how wide it should be. Bootstrap 5 has width utility classes that cover to the nearest 25%, or you can use the grid system for more options.
  For an example using a grid, see Ademal's Progress Bar. For more on using BS grid, check out Annie Stein's Advanced Formatting with Containers.
 

Result

Bootstrap also provides background utility classes you can apply to these bars to change their color. Specific to progress bars, you can also add faint stripes or animate those stripes, though I recommend using animations sparingly. These colors are a great way to show multiple bars in one track, which also lets you do things like add links per bar.
 

Result

  You can put nearly anything inside a progress bar. Here I've done text, a font-awesome icon, and an article mention. You can also add images, tooltips, and more.

CSS lets us get more specific with styling. If you want to affect every progress track and bar you use, you'd target .progress and .progress-bar. Using custom classes, we can add to our toolbox of reusable properties, like adding more widths or background colors, or specifying when we want a bigger progress track.
 

Result

Let's say you want a progress bar that shows how many Summer Camp prompts you've answered out of your ultimate goal. We need some math to calculate percent complete, but I promise it's easy. Take your current progress, divide it by your goal, and multiply by 100%. Let's say you've finished 5 prompts out of your goal of 32.
 

Result

  You may want to adjust some colors to be more legible. The downside is whenever you finish another article, you'll need to update both your BBCode (to change 5/32 prompts to 6/32 prompts) and your CSS (update scDone from 5 to 6).

We can also be clever in how we reuse this for other events, such as World Ember. First we'll create a generic progress track that sets progress bar width to that calculated percentage. Then we'll create event-specific progress bars that specify that value of those variables for that event.
 

Result

 
  Same as before, we unfortunately need to update both BBCode and CSS every time we make progress, instead of just BBCode.

What if we want to link to each article we write for SC inside the progress bar? One option is to add links to the single progress bar. Another is to create a separate bar for every article. I don't recommend this if you have a ton of bars you want to add - it won't look nice on small screens. I'll show you how to create a bar with 8 segments and let you extrapolate from there.
 

Result

  Now I have 8 clear segments in the track, and can add links to completed articles whenever they're done! You can use custom classes or the built-in bg colors to differentiate between segments that represent incomplete work versus a completed article.