Progress Bars

Progress bars are a fun way to visually display information ranging from progress toward a goal to test results and more. Even better, they and can be used without any CSS at all. Read on to learn how, and leave a comment with any questions or links cool progress bars you've made!

Prerequisites

	Progress bars use custom containers and Bootstrap 5, both of which require a Grandmaster or higher subscription.
	Progress bars are fully functional with BBCode alone, no CSS required. However, CSS gives you more styling options. The CSS portion of this guide assumes you know the basics.
	This guide is written for Bootstrap 5. Check your version and upgrade if needed from your world styling menu. Upgrading to Bootstrap 5 might cause issues with your current theme. Try it in a test world, first.

Documentation

Bootstrap is a toolkit that World Anvil and other sites are built off of. With a few adjustments, we can use some of its tools here on WA. Ifyou want to learn how to use Bootstrap documentation to do cool things, use the button below to open the doc on progress bars 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.

Result

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.

---

Width

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

BBCode

[container:progress]

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

[/container]

---

Colors

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

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.

BBCode

[container:progress]

[container:progress-bar w-25 bg-dark]

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

@[Click Me](article:d45a1399-fe9f-4474-8ed3-6dc7ad75d658)

[/container]

[/container]

---

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.

Result

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;

}

---

Single Purpose Bar

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

5/32 Prompts

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

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.

---

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.

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.

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.

---

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.

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.

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: 100%;

border: 1px solid white;

}

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