GitHub - kaermorchen/ember-cli-loaders: An ember-cli addon for using Loaders.css

Ember-cli-loaders

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.