Aside from the UiKit being built completely built on Bootstrap and Font Awesome, other libraries have been included for convenience.

Spin.js

Spin.js dynamically creates spinning activity indicators that can be used as resolution-independent replacement for AJAX loading GIFs.

The easiest way to use Spin.js is with jQuery. Spin.js is not dependent on jQuery, however, jQuery is required for the UiKit so let’s use the Spin.js jQuery plugin (included in the UiKit).

<div id="spin-example"></div>

wvusUikit('#spin-example').spin();

Turning off

Turning off Spin.js after the activity has finished is just as easy as starting it. Just call wvusUikit('#spin').spin(false);

Presets

Spin.js has several prebuilt presets that can be used like small and large. The UiKit has opted to use the default for simplicity but feel free to create your own presets. Below is an example of a preset definition. Documentation on preset values can be found here

// Using Presets:
// ==============

$('#el').spin('small'); // Creates a 'small' Spinner using the text color of #el.
$('#el').spin('large', '#fff'); // Creates a 'large' white Spinner.

// Adding a custom preset:
// =======================

$.fn.spin.presets.flower = {
  lines: 9
  length: 10
  width: 20
  radius: 0
}

$('#el').spin('flower', 'red');

Video.js

Video.js is a JavaScript and CSS library that makes it easier to work with and build on HTML5 video. This is also known as an HTML5 Video Player. Video.js provides a common controls skin built in HTML/CSS, fixes cross-browser inconsistencies, adds additional features like fullscreen and subtitles, manages the fallback to Flash or other playback technologies when HTML5 video isn’t supported, and also provides a consistent JavaScript API for interacting with the video.

Video.js has a lot to offer and really, too much to write about in our documentation. The UiKit has not changed anything with Video.js except for the skin. This means that any video used with Video.js and the UiKit will receive World Vision styled controls.

Documentation for Video.js can be found here