WA How-To: Progress Bars

Progress bars are a fun way to visually display various information, and can be used without any CSS at all. Read on to learn how, and leave a comment if you have any questions or want to share some cool progress bars you've made.

Pre-Requisites

These steps use custom containers, which require a Grandmaster subscription.

Progress bars require Bootstrap 5. Upgrade from your world styling menu.

Only BBCode is required, but CSS gives you access to more tricks.

Warning

Upgrading from BS3 to BS5 will change aspects of your world's appearance, and may even break parts of your theme.
Consider trying in a test world, first. You can revert back to BS3 at any time (but any BS5 components you've added will break).

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.

Progress Component in Bootstrap 5

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

<div class="progress">

<div class="progress-bar" ...></div>

</div>

BBCode

[container:progress]

[container:progress-bar] [/container]

[/container]

You must have something between [container:progress-bar] and [/container], even if it's just a space like I have here. Any text you put there will appear on the progress bar itself, as you'll see later.

Result

---

Width

Another way to do progress bar width is using Bootstrap's grid system. Instead of w-25, you could use col-4. See Ademal's Progress Bar for an example. For more on using BS grid on WA, check out Annie Stein's Advanced Formatting with Containers.

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

[container:progress]

[container:progress-bar w-25] [/container]

[/container]

Built-in width options include w-25 w-50 w-75 w-100. There's also w-auto, but that's probably less helpful here.

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

[container:progress]

[container:progress-bar w-25 bg-success]This is a 25% bar[/container]

[container:progress-bar w-50 bg-danger progress-bar-striped][section:fas fa-circle-half-stroke] [/section][/container]

[container:progress-bar w-25 bg-dark]@[Click Me](article:d45a1399-fe9f-4474-8ed3-6dc7ad75d658)[/container]

[/container]

Built-in color options include bg-secondary bg-dark bg-light bg-success bg-warning bg-info w-danger. The last one is bg-primary, which is the default blue for progress bars.
Other built-in visual options are progress-bar-striped and progress-bar-animated. Animated is only noticable if you've also applied the stripes. The persistent animation it creates can be distracting, so use it cautiously.

Result

This is a 25% bar

Click Me

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

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

[container:progress h-30px]

[container:progress-bar w-40 bg-salmon] [/container]

[/container]

CSS

.user-css .progress.h-30px {

height: 30px;

}
.user-css .progress-bar.w-40 {

width: 40%;

}
.user-css .progress-bar.bg-salmon {

background: salmon;

}

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

[container:progress rin-sc-test]

[container:progress-bar]5/32 Prompts[/container]

[/container]

CSS

.user-css .progress.rin-sc-test .progress-bar {

--scDone: 5;

--scGoal: 32;

width: calc(var(--scDone) / var(--scGoal) * 100%) ;

}

*Note: remove the space between 100%) and ; if copy/pasting into your own CSS.
You don't need the variables here, but I think they make it clearer what's going on and why.

Result

5/32 Prompts

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

---

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

[container:progress rin-progress-pct rin-sc-test]

[container:progress-bar]5/32 Prompts[/container]

[/container]
[container:progress rin-progress-pct rin-we-test]

[container:progress-bar]67% to WE Goal[/container]

[/container]

CSS

.user-css .progress.rin-progress-pct .progress-bar {

width: calc(var(--done) / var(--goal) * 100%) ;

}
.user-css .progress.rin-sc-test {

--done: 5;

--goal: 32;

}
.user-css .progress.rin-we-test {

--done: 16895;

--goal: 25000;

}

*Note: remove the space between 100%) and ; if copy/pasting into your own CSS.

Result

5/32 Prompts

67% to WE Goal

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

---

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.

BBCode

[container:progress rin-sc-link-test]

[container:progress-bar] [/container]

[container:progress-bar] [/container]

[container:progress-bar] [/container]

[container:progress-bar] [/container]

[container:progress-bar] [/container]

[container:progress-bar] [/container]

[container:progress-bar] [/container]

[container:progress-bar] [/container]

[/container]

CSS

.user-css .progress.rin-sc-link-test .progress-bar {

width: calc(100% / 8) ;

border: 1px solid white;

}

*Note: remove the space between 8) and ; if copy/pasting this into your own CSS.

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.

Inspiration

Check out these progress bars others have made for ideas on how to use them yourself!

Elspeth uses them to show popularity of conspiracy theories among different groups

Mochi uses one to show in-universe progress toward a donation goal