Versions Compared

Old Version 4

changes.mady.by.user George Lewe

Saved on

compared with

New Version Current

changes.mady.by.user George Lewe

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Screenshot

Description

The Progress Bar allows you to show a visual representation of a progress. You can select the width, color, style and percentage of completion.

Adding the Macro

Edit your page.

Select "+" => Other macros

Type in "ProgressbarBootstrap" in the Search box

Select the "ProgressbarBootstrap Progress Bar" macro

Macro Options

Width

Enter the total width of the progress bar.

Style

The style defines the color of the progress bar (the completed part). The listbox contains the terms that Bootstrap uses to identify the color style.

TermBackground Color
danger


Div
stylebackground-color:#dc3545;width:100px;height:30px;border:1px solid #000;



dark


Div
stylebackground-color:#343a40;width:100px;height:30px;border:1px solid #000;


info


Div
stylebackground-color:#17a2b8;width:100px;height:30px;border:1px solid #000;


light


Div
stylebackground-color:#f8f9fa;width:100px;height:30px;border:1px solid #000;


primary


Div
stylebackground-color:#007bff;width:100px;height:30px;border:1px solid #000;


secondary


Div
stylebackground-color:#868e96;width:100px;height:30px;border:1px solid #000;


success


Div
stylebackground-color:#28a745;width:100px;height:30px;border:1px solid #000;



warning


Div
stylebackground-color:#ffc107;width:100px;height:30px;border:1px solid #000;


Progress

Enter the percentag of completion of the progress.

Striped

Check to show the fill of the completed part in stripes.

Animated

Check to animate the completed part. This only works in combnation with the Striped option.


Style
div#main-content.wiki-content {
   font-size: 1.2em !important;
   font-family: Segoe UI, sans-serif !important;
}
.wiki-content .contentLayout2 .columnLayout .cell
{
  padding-left: 0px;
  padding-right: 0px;
}