ember-content-loader

Easy, customizable skeletons screens

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
ember-content-loader
4223.0.02 years ago5 years agoMinified + gzip package size for ember-content-loader in KB

Readme

ember-content-loader
Build Status Ember Observer Score This project is using Percy.io for visual regression testing.
SVG-Powered component to easily create skeleton screens / placeholder loadings (like Facebook's cards loading). Documentation can be found here

Compatibility

  • Ember.js v3.20 or above
  • Ember CLI v3.20 or above
  • Node.js v12 or above
  • ember-auto-import >= 2

Installation

ember install ember-content-loader

Usage

Facebook skeleton
Simply add the <ContentLoader> component in your code with the shapes that you want.
<ContentLoader>
  {{!-- Only SVG shapes --}}
  <rect x="70" y="15" rx="4" ry="4" width="117" height="6.4" />
  <rect x="70" y="35" rx="3" ry="3" width="85" height="6.4" />
  <rect x="0" y="80" rx="3" ry="3" width="350" height="6.4" />
  <rect x="0" y="100" rx="3" ry="3" width="380" height="6.4" />
  <rect x="0" y="120" rx="3" ry="3" width="201" height="6.4" />
  <circle cx="30" cy="30" r="30" />
</ContentLoader>

You can use the online editor to create complex shapes.
Note: This editor is made for React, so you need to translate the produced code.

Options

You can find all <ContentLoader> available options here

Thanks

Contributing

See the Contributing guide for details.

License

This project is licensed under the MIT License.