ember-cli-loaders

An ember-cli addon for using Loaders.css

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
ember-cli-loaders
1500.8.32 years ago8 years agoMinified + gzip package size for ember-cli-loaders in KB

Readme

Ember-cli-loaders

npm version npm monthly downloads Ember Observer Score License: MIT


An ember-cli addon for using Loaders.css in Ember applications.

Compatibility

  • Ember.js v3.24 or above
  • Ember CLI v3.24 or above
  • Node.js v12 or above

Installation

Demo

Getting Started

Install in ember-cli application
ember install ember-cli-loaders

Then include the following in your app.scss file:
@import "ember-cli-loaders/loaders";

How to use

You can use loader's components.
<LoaderBallPulse />
<LoaderBallGridPulse />
<LoaderBallClipRotate />
<LoaderBallClipRotatePulse />
<LoaderSquareSpin />
<LoaderBallClipRotateMultiple />
<LoaderBallPulseRise />
<LoaderBallRotate />
<LoaderCubeTransition />
<LoaderBallZigZag />
<LoaderBallZigZagDeflect />
<LoaderBallTrianglePath />
<LoaderBallScale />
<LoaderLineScale />
<LoaderLineScaleParty />
<LoaderBallScaleMultiple />
<LoaderBallPulseSync />
<LoaderBallBeat />
<LoaderLineScalePulseOut />
<LoaderLineScalePulseOutRapid />
<LoaderBallScaleRipple />
<LoaderBallScaleRippleMultiple />
<LoaderLineSpinFadeLoader />
<LoaderTriangleSkewSpin />
<LoaderPacman />
<LoaderSemiCircleSpin />
<LoaderBallGridBeat />
<LoaderBallScaleRandom />

Configuration

Custom Loaders.css components

For import not all loaders instead of @import "ember-cli-loaders/loaders"; use code below:
@import 'ember-cli-loaders/variables';
@import 'ember-cli-loaders/mixins';

/**
 * Dots
 */
@import 'ember-cli-loaders/animations/ball-pulse';
@import 'ember-cli-loaders/animations/ball-pulse-sync';
@import 'ember-cli-loaders/animations/ball-scale';
@import 'ember-cli-loaders/animations/ball-scale-random';
@import 'ember-cli-loaders/animations/ball-rotate';
@import 'ember-cli-loaders/animations/ball-clip-rotate';
@import 'ember-cli-loaders/animations/ball-clip-rotate-pulse';
@import 'ember-cli-loaders/animations/ball-clip-rotate-multiple';
@import 'ember-cli-loaders/animations/ball-scale-ripple';
@import 'ember-cli-loaders/animations/ball-scale-ripple-multiple';
@import 'ember-cli-loaders/animations/ball-beat';
@import 'ember-cli-loaders/animations/ball-scale-multiple';
@import 'ember-cli-loaders/animations/ball-triangle-trace';
@import 'ember-cli-loaders/animations/ball-pulse-rise';
@import 'ember-cli-loaders/animations/ball-grid-beat';
@import 'ember-cli-loaders/animations/ball-grid-pulse';
@import 'ember-cli-loaders/animations/ball-spin-fade-loader';
@import 'ember-cli-loaders/animations/ball-spin-loader';
@import 'ember-cli-loaders/animations/ball-zig-zag';
@import 'ember-cli-loaders/animations/ball-zig-zag-deflect';

/**
 * Lines
 */
@import 'ember-cli-loaders/animations/line-scale';
@import 'ember-cli-loaders/animations/line-scale-random';
@import 'ember-cli-loaders/animations/line-scale-pulse-out';
@import 'ember-cli-loaders/animations/line-scale-pulse-out-rapid';
@import 'ember-cli-loaders/animations/line-spin-fade-loader';

/**
 * Misc
 */
@import 'ember-cli-loaders/animations/triangle-skew-spin';
@import 'ember-cli-loaders/animations/square-spin';
@import 'ember-cli-loaders/animations/pacman';
@import 'ember-cli-loaders/animations/cube-transition';
@import 'ember-cli-loaders/animations/semi-circle-spin';

Custom variables

You can use custom Loaders.css variables
$primary-color: green;

@import "ember-cli-loaders/loaders";

Contributing

See the Contributing guide for details.

License

Ember-cli-loaders is released under the MIT License. See the bundled LICENSE file for details.