Improved Progress Bar
A progress bar that scales properly with the column width.
Utility
This can display the progress on an arbitrary number of tasks, such as challenge prompts.
Prompts completed: 10/32
It can also be used for bars that display comparable stats at a glance.
Constitution:
Strength:
Dexterity:
Intelligence:
Wisdom:
Charisma:
Manufacturing
The Content
Where to insert it
Anywhere BBCode is supported.What to insert
Insert this where you want to show your bar.[container:progress-box] [container:progress-filled].[/container] [/container]
The CSS to make it work
Hide unnecessary parts
To make the bar fill up without gaps, remove the padding inside the parent container and the margin around the inner one.Calculate the sizes
To adjust the height and width, you need to do some calculations. Substract the border width from the height of the inner container. The width of the progress bar needs a more complex formula.- first number: completed items
- second number: total items
.user-css .progress-box{
display: inline-block;
width: 100%;
padding: 0px;
height: 35px;
border: 5px solid gray;
background: black;
}
.user-css .progress-filled{
margin: 0px;
border: 0px solid transparent;
height: 25px;
width: calc(10 / 32 * 100%) ;
background: white;
}
Updating the Progress
Every time you make progress on the displayed task or level up the attribute, you will need to adjust the bar's width manually. For this, you only need to change the number in the formula that refers to the total number of items.
Access & Availability
Grandmaster
Complexity
Containers, CSS
Discovery
searching a way to fix the scaling on the old Progress Bar approach
Styling Examples
Fancy Coloring
You can style the frame with a suitable border image. Gradients can add a semblance of volume to the bar itself.
Bananas collected: 7/50
show BBCode
[container:progress-box bananas]
[container:progress-filled]
[/container]
[/container]
.user-css .progress-box.bananas{
height: 24px;
border-width: 2px;
border-color: #444411;
background: linear-gradient(to bottom, #221107 0%, #553300 60%, #221107 100%
}
.user-css .bananas .progress-filled{
height: 20px;
width: calc(7 / 50 * 100%
background: linear-gradient(to bottom, #ccaa11 0%, #ffffaa 40%, #ccaa11 100%
}
Labeled Image Bar
You can easily add a label on top with another container. For gradually revealing an image, you need to place the empty space on top of it, and calculate the remaining progress.
Map Explored
show BBCode
83%
[container:progress-box map][container:progress-empty][/container][container:progress-label]83%[/container][/container]
.user-css .progress-box.map{
position:relative;
height: 40px;
border-width: 5px;
border-image: url(insert image url here) 20 stretch;
background-image: url(insert image url here
background-size: 100%;
background-position: center;
}
.user-css .map .progress-empty{
height: 30px;
width: calc( (100 - 83) / 100 * 100%) ;
right:0px;
margin-left:auto;
background: linear-gradient(to bottom, #111111 0%, #333333 60%, #111111 100%
}
.user-css .map .progress-label{
position:absolute;
top:0px;
z-index: 3;
text-align: center;
width: 100%;
color:white;
}
Comments