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
-
Install package:
npm install @brikcss/spinner
-
Include CSS or SASS files from one of:
/dist /css /sass
-
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 matchesid
.
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.