concordnowember-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-loaderUsage
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.