ember-content-loader

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

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

• react-content-loader

Contributing

See the Contributing guide for details.

License

This project is licensed under the MIT License.