@brikcss/spinner

Activity Spinner Icon

Loading activity spinner icon. Patterned after Material Design's circular activity indicator.

Environment / tooling support

Node/CommonJS	CLI	UMD	ESModule	VanillaJS	AngularJS	CSS	SASS
✔	x	✔	✔	✔	✔	✔	✔

Install

1. Install package:

   npm install @brikcss/spinner

2. Include CSS or SASS files from one of:

   /dist
   	/css
   	/sass
   

3. Include JS files from one of:

   /dist
   	/angularjs
   	/commonjs
   	/esmodule
   	/umd
   	/vanillajs
   

JS Usage

Spinner API

• all: All spinner instances, by ID.
• Spinner.create(element, options = {}): Create and return a spinner instance.
• Spinner.toggle(id): Toggle a spinner instance.
• Spinner.load(id) Load / activate a spinner instance.
• Spinner.unload(id) Unload / deactivate a spinner instance.
• Spinner.destroy(id) Destroy a spinner instance.

Note: Each method returns the spinner instance, except the destroy method returns a Boolean.

Spinner instance

You can call most of the same methods from the spinner instance without knowing the spinner's ID.

• instance.toggle(): Toggle a spinner instance.
• instance.load() Load / activate a spinner instance.
• instance.unload() Unload / deactivate a spinner instance.
• instance.destroy() Destroy a spinner instance.

AngularJS

The AngularJS SpinnerService is simply a thin wrapper around the vanilla core Spinner service, with the following directives added for convenience in interacting with Spinner:

• <spinner options="{...}"> Create a spinner element in the DOM.
• [spinner-toggle="{{id}}"] Toggle the spinner that matches id.

To toggle a spinner with a controller variable, use the ng-class directive to toggle the active class:

<spinner options="{...}" ng-class="{'spinner--is-spinning': myVariableIsTrue}"></spinner>

CSS Usage

Classes

• spinner: Spinner base class. Note: This won't show anything in the UI until the spinner has the active class modifier.
• spinner--is-spinning: Activate the spinner and show in the UI.
• spinner--small: Small spinner.
• spinner--large: Large spinner.
• spinner--inline: Inline spinner. For display with inline elements such as text or buttons.
• spinner--multicolor: Multicolor spinner track.
• spinner--dressed: "Dresses" spinner with a background and padding.
• spinner--clean: Cleans up background and padding from a dressed spinner.
• spinner--absolute: Absolutely positioned spinner.
• spinner--slide: Spinner which slides from the top of an element.