An open API service indexing awesome lists of open source software.

https://github.com/concordnow/ember-content-loader

Easy, customizable content placeholders / skeletons screens
https://github.com/concordnow/ember-content-loader

ember ember-addon ember-cli ember-content-loader hacktoberfest loader skeleton-screens

Last synced: 2 months ago
JSON representation

Easy, customizable content placeholders / skeletons screens

Awesome Lists containing this project

README

          

ember-content-loader
==============================================================================

[![Build Status](https://github.com/concordnow/ember-content-loader/actions/workflows/main.yml/badge.svg?branch=master)](https://github.com/concordnow/ember-content-loader/actions/workflows/main.yml)
[![Ember Observer Score](https://emberobserver.com/badges/ember-content-loader.svg)](https://emberobserver.com/addons/ember-content-loader)
[![This project is using Percy.io for visual regression testing.](https://percy.io/static/images/percy-badge.svg)](https://percy.io/concordnow/ember-content-loader)

SVG-Powered component to easily create skeleton screens / placeholder loadings (like Facebook's cards loading). Documentation can be found [here](https://concordnow.github.io/ember-content-loader/)

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](https://user-images.githubusercontent.com/4838076/34308760-ec55df82-e735-11e7-843b-2e311fa7b7d0.gif)

Simply add the `` component in your code with the shapes that you want.

```hbs

{{!-- Only SVG shapes --}}





```

You can use the [online editor](http://danilowoz.com/create-content-loader/) to create complex shapes.

> **Note:** This editor is made for React, so you need to translate the produced code.

Options
------------------------------------------------------------------------------

You can find all `` available options [here](https://concordnow.github.io/ember-content-loader/#/docs/components/content-loader)

Thanks
------------------------------------------------------------------------------

* [react-content-loader](https://github.com/danilowoz/react-content-loader)

Contributing
------------------------------------------------------------------------------

See the [Contributing](CONTRIBUTING.md) guide for details.

License
------------------------------------------------------------------------------

This project is licensed under the [MIT License](LICENSE.md).