Progress Bars
Get creative with this one. — We honestly couldn’t think of a whole lot of real-world uses for this shortcode, but we thought it was too cool of a Boostrap feature to leave out.
Web Design
25%Graphic Design
50%Print Design
75%[raw] [progress_bar percent="25" color="#1cc824" label="Web Design"] [progress_bar percent="50" color="#cf2c2c" label="Graphic Design"] [progress_bar percent="75" color="#3b86b6" label="Print Design"] [/raw]
Web Design
25%Graphic Design
50%Print Design
75%[raw] [progress_bar percent="25" color="#1cc824" label="Web Design" striped="true"] [progress_bar percent="50" color="#cf2c2c" label="Graphic Design" striped="true"] [progress_bar percent="75" color="#3b86b6" label="Print Design" striped="true"] [/raw]
Options
| Argument | Default | Description |
|---|---|---|
| percent | 100 | A percentage of how far the bar is – 25, 50, 80, etc. |
| color | default | Color of bar – default, danger, success, info, warning, or custom hex (i.e. #000000). |
| label | None | Label of what this bar represents. Ex: Graphic Design |
| striped | false | Whether the bar is striped or not – true, false. |
Preset Colors
| Color | Example |
|---|---|
| Default | 30%
60% |
| Danger | 30%
60% |
| Success | 30%
60% |
| Info | 30%
60% |
| Warning | 30%
60% |
Milestones
0
Cups of Coffee
0
Hours Worked
0
Sleepless Nights
0
Bathroom Trips
[raw] [column size="1/4" wpautop="false"] [milestone milestone="234" color="#0c9df0" text="Cups of Coffee"] [/column] [column size="1/4" wpautop="false"] [milestone milestone="1020" color="#0c9df0" text="Hours Worked"] [/column] [column size="1/4" wpautop="false"] [milestone milestone="200" color="#0c9df0" text="Sleepless Nights"] [/column] [column size="1/4" wpautop="false"] [milestone milestone="893" color="#0c9df0" text="Bathroom Trips"] [/column] [/raw]
0
Cups of Coffee
0
Hours Worked
0
Sleepless Nights
[raw] [column size="1/3" wpautop="false"] [milestone milestone="234" color="#0c9df0" text="Cups of Coffee" boxed="true"] [/column] [column size="1/3" wpautop="false"] [milestone milestone="1020" color="#0c9df0" text="Hours Worked" boxed="true"] [/column] [column size="1/3" wpautop="false"] [milestone milestone="200" color="#0c9df0" text="Sleepless Nights" boxed="true"] [/column] [/raw]
Options
| Argument | Default | Description |
|---|---|---|
| milestone | 100 | An integer representing the milestone. |
| color | #0c9df0 | Text color of the milestone number – Ex: #000000 |
| label | None | Label of what this bar represents. Ex: Graphic Design |
| text | None | Brief text to appear below the milesestone number. |
| boxed | false | Whether the milestone unit has a box around it – true or false |
Milestone Rings
20%
Web Design
40%
Graphic Design
60%
Print Design
80%
Snowboarding
[raw] [column size="1/4" wpautop="false"] [milestone_ring percent="20" color="#0c9df0" display="20%" title="Web Design"] [/column] [column size="1/4" wpautop="false"] [milestone_ring percent="40" color="#0c9df0" display="40%" title="Graphic Design"] [/column] [column size="1/4" wpautop="false"] [milestone_ring percent="60" color="#0c9df0" display="60%" title="Print Design"] [/column] [column size="1/4" wpautop="false"] [milestone_ring percent="80" color="#0c9df0" display="80%" title="Snowboarding"] [/column] [/raw]
Options
| Argument | Default | Description |
|---|---|---|
| percent | 75 | Percentage of how far the bar will wrap around. Use an integer from 1-100. |
| color | #0c9df0 | Color of the wrapping bar – Ex: #000000 |
| track_color | #eeeeee | Color of the track the bar wraps within – Ex: #000000 |
| display | None | Very brief text to appear within ring. Ex: 75% |
| title | None | Optional title text to appear below milestone. |
| text | None | Optional description text to appear below milestone. |
| text_align | center | If milestone has title or text, this is the alignment of that text – center, left, or right |
| boxed | false | Whether the milestone unit has a box around it – true or false |