WA How-To: Progress Bars
Pre-Requisites
Warning
Documentation
Bootstrap is like a toolkit that World Anvil and other sites are built off of. My goal is to help you understand how to follow BS documentation and apply it to your articles here on WA, starting with progress bars. Use the button below to open the documentation and keep it nearby while you go through this guide. BS5 progress bars create a "progress" class for the horizontal track that the "progress bar" sub-class fills in. The documentation assumes we can create from the HTML level. Here on WA, we instead use containers and sections to create divs and spans, respectively. Anywhere that says <div class="name"> translates to [container:name] in your bbcode.BBCode
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.
HTML
BBCode
Result
Width
In order for the progress bar to be visible, you need to specify how wide it should be. Bootstrap 5 has built-in width classes that cover to the nearest 25%. If you're a quarter of the way through something, you can create a progress bar to reflect that by adding this extra width class to the progress-bar container.
BBCode
Result
Colors
Bootstrap also provides built-in background colors you can apply to these bars, along with optionally giving them faint stripes or even animating those stripes. These colors are a great way to show multiple bars in one track, which also lets you do things like add links per bar.
BBCode
Result
CSS
Custom Classes
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.
BBCode
CSS
Result
Single Purpose Bar
The reason I'm rushing this out is to give tips to those who want to use a progress bar for Summer Camp. Let's say you want a progress bar that shows how many 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.
BBCode
CSS
Result
Multi-Purpose Bar
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.
BBCode
CSS
Result
One Bar per Article
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.
Very informative and easy to follow! Thank you! <3
Yay I'm glad to hear it! Feel free to share any progress bars you're proud of :D
Speculative-Fiction Writing