Versions Compared

Old Version 2

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

The following animated gif shows an impression of the Bootstrap Spinners as they rotate or change size and opacity.

ice_video_20190212-195025.gifImage RemovedImage Added

Description

The Spinner is an animated "I am busy" indicator. You can use it for other visual purposes as well of course.

Adding the Macro

Edit your page.

Select "+" => Other macros

Type in "Bootstrap" in the Search box

Select the "Bootstrap Spinner" macro

Macro Options

image2019-1-27_22-53-56.pngImage Removed

Image Added

Shape

Select the shape of the spinner

ShapeDescription
Border SpinnerA rotating open circle
Growing CircleA circle with an animated increase in color opacity

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;


Size

Select between four sizes:

  1. Small
  2. Normal
  3. Medium
  4. Large

Display as Button

If you select this option, the spinner will be displayed as a button.

Button Text

If the "Display as Button" option is selected, you can add a button text here that will be displayed next to the spinner.



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;
}