WireBootstrap
HomeDocsBuySupport
  • Introduction
  • Overview
  • Getting Started
  • Installation
  • Connecting to Data
    • Data Connectors
      • SQL Data
      • Custom Web Services
      • Local Data
      • Other Sources
    • Data Sources
    • Discovery
    • Building a Data Connector
  • Working With Queries
    • Select Queries
      • Query Extensions
    • Stored Procedures
    • Custom Web Services
    • Executing Queries
    • ORM
  • Writing Data
  • Updates
  • Deletes
  • Working with DataTables
    • Introduction
    • Filter and Sort
    • Select and Calculate
    • Joins
    • Rows
    • Columns
  • Working with DataSets
  • Introduction
  • Executing Queries
  • Transforms
  • Writing Data
  • Data Events
  • Working with Components
    • Introduction
    • Encapsulation
    • Configuration
      • Data
      • Events
      • Observables
      • Validation
      • Display
      • Vendor
      • Custom
    • Component
    • Web Frameworks
    • Building a Component
      • Hello World
      • Data Events
      • DataSets
  • Working With Data Events
    • Introduction
    • Event Basics
    • Event Data
    • Event Actions
  • Working with Themes
    • Introduction
    • Sample Data
    • Libraries
    • Pages
    • Building a Theme Project
  • Utilities
    • Formatting
    • Expressions
    • Collections
    • Spinners
    • Copy and Merge
    • Validation
    • Loading Assets
    • Service Calls
    • Download Files
    • Browser Location
    • Types
    • Promise
  • Reference
    • wire
      • wire.Collection
      • wire.download
      • wire.validate
    • wire.data
      • wire.data.DataEvent
      • wire.data.DataModel
      • wire.data.DataPromise
      • wire.data.DataSet
      • wire.data.DataSource
      • wire.data.DataTable
        • Columns
        • Rows
      • wire.data.StoredProcedure
      • wire.data.TableQuery
    • wire.ui
      • wire.ui.Component
      • wire.ui.validate
Powered by GitBook
On this page
  • On
  • Element
  • Size
  • Style
  • Off

Was this helpful?

  1. Utilities

Spinners

WireBootstrap contains a function for displaying spinner icons of different sizes. The spinners can work over an entire page or just one element.

The wire.css file is required to use this function. Be sure this is included in your page reference. Visit your theme's documentation for details however this file is usually in the lib\wire folder in most themes installations.

To use a spinner, create a new instance of the wire.ui.spinner class.

const spinner = new wire.ui.spinner();

On

Use the on method to turn on a spinner. The following example will turn the entire page opaque and load a medium sized spinner.

spinner.on();

Element

To specify the spinner be over only a specific element, use the first constructor parameter to pass in the id selector of the element. Optionally, you can turn the spinner as part of the constructor.

const spinner = new wire.ui.spinner("#button").on();

Size

There are five spinner size icons. The default is to use a spinner size 3 which is the medium size. Use the second constructor parameter for configuration.

The following example sets the configuration parameter size to 1. This would be a more appropriate size to put over a button.

const spinner = new wire.ui.spinner("#button", { size: 1 } );

Size also has a helper method that can be used.

const spinner = new wire.ui.spinner("#button").size(1);

Style

To change the CSS style for any size , set the size[N] property on the confirmation parameter to a CSS icon class(s) as seen below.

const spinner = new wire.ui.spinner("#button", 
    { css: { size1: "fa fa-spinner fa-spin fa-1x" } }
);

To add extra classes to a spinner, use the extra property on the css configuration object.

The example below changes a spinner color to white.

const spinner = new wire.ui.spinner("#button", 
    { css: { extra: "text-white" } }
);

Off

Use the off method to turn off an existing spinner.

const spinner = new wire.ui.spinner();

...

spinner.off();
PreviousCollectionsNextCopy and Merge

Last updated 2 years ago

Was this helpful?

By default, the CSS that generates the icon is the fa-circle-o-notch icon from Font Awesome 4. If the spinner icon is not being changed as part of the configuration, be sure this file is included in your page reference. The file can be hosted or download from .

https://www.bootstrapcdn.com/fontawesome