Template:Progress bar

Documentation for Template:Progress bar [view] [edit] [history] [purge] (How does this work?)

A template to be used in both Template:Percent_of_set and Template:Quest_infobox for displaying a progress bar. Centralizes the CSS rules for these bars and also makes them adaptive to light and dark themes.

Documentation

percent

Required. Percent to fill the bar. Do not include the trailing % symbol

width

Optional. Defines the width of the total bar using standard CSS units (px, vw, em, etc). Defaults to 200px.

color

Optional. Set the color of the filled part of the bar. Recognizes several light/dark responsive keywords, or can accept any CSS color syntax. Defaults to green.

Recognized color keywords

Keyword	Light theme value	Dark theme value
green	#00AF32	#00AF32
arealmreborn	#666666	#8F8F8F
heavensward	#4B7FE9	#4B7FE9
stormblood	#A3253C	#BE344D
shadowbringers	#4F45B4	#756DC7
endwalker	#C0790B	#C0790B
dawntrail	#DEB746	#DEB746

Examples

Default color, 75%:

Markup	Renders as
{{Progress bar|percent=75}}

A Realm Reborn, 50%:

Markup	Renders as
{{Progress bar|color=arealmreborn|percent=50}}

Heavensward, 20%:

Markup	Renders as
{{Progress bar|color=heavensward|percent=20}}

Stormblood, 75%:

Markup	Renders as
{{Progress bar|color=stormblood|percent=75}}

Shadowbringers, 80%:

Markup	Renders as
{{Progress bar|color=shadowbringers|percent=80}}

Endwalker, 15%:

Markup	Renders as
{{Progress bar|color=endwalker|percent=15}}

Dawntrail, 50%:

Markup	Renders as
{{Progress bar|color=dawntrail|percent=50}}

Custom color (#46C9DE), 60%:

Markup	Renders as
{{Progress bar|color=#46C9DE|percent=60}}

Full width:

Markup	Renders as
{{Progress bar|width=100%|percent=60}}