Nondeterministic Polynomial Munchies

    @brikcss/spinner

    0.1.3 • Public • Published

    Activity Spinner Icon

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

    NPM version NPM downloads per month Travis branch NPM version Coverage Status Commitizen friendly semantic release code style: prettier

    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.

    Install

    npm i @brikcss/spinner

    DownloadsWeekly Downloads

    8

    Version

    0.1.3

    License

    none

    Unpacked Size

    330 kB

    Total Files

    24

    Last publish

    Collaborators

    • thezimmee