Progress Bar
A basic progress bar.
There is now a better approach to do this.
The Improved Progress Bar requires no placeholder characters and scales properly with the width of the surrounding page element.
This old approach will remain here for reference.
Utility
This can display the progress on an arbitrary number of tasks. It can also be used for bars that display comparable stats at a glance.
Manufacturing
Content
Where to insert it
Anywhere BBCode is supported.What to insert
Insert this where you want to show your bar. Replace the "filled" and "empty" containers with the respective count of a symbol of your choice.[container:progress-box] [container:progress-filled]***[/container][container:progress-empty]*******[/container] [/container]
The CSS to make it work
Set the text color to transparent.
Remove padding and margins within the box in order to accurately reflect the length.
For the same reason, remove any border around the inner containers.
To adjust the height and width, modify the font size and line height.
Style the outer container's border as you like and assign backgrounds to the two inner containers.
.user-css .progress-box{
display: inline-block;
width: auto;
color: transparent;
padding: 0px;
font-size: 3.0em;
line-height: 32px;
border: 5px solid gray;
}
.user-css .progress-empty,
.user-css .progress-filled{
border: 0px solid transparent;
margin: 0px;
padding: 0px;
}
.user-css .progress-filled{
background: white;
}
.user-css .progress-empty{
background: black;
}
Access & Availability
Grandmaster
Complexity
Containers, CSS
Discovery
own experimentation
Examples
Basic Example, 3/10
***
*******
Fancy Example, 5/31
*****
**************************
.user-css .progress-box{
...
font-size:1.5em;
line-height: 12px;
border-image:url(address-of-your-image.png)
20 stretch;
box-shadow:5px 5px 10px black;
}
...
.user-css .progress-filled{
background: linear-gradient(to bottom,
#006666 0%, #00cc99 30%, #006666 100%) ;
}
.user-css .progress-empty{
background: linear-gradient(to bottom,
#000000 0%, #444444 70%, #000000 100%) ;
}
Comments