ember-content-placeholders

Ember addon for rendering fake content while data is fetching to provide better UX and lower bounce rate.

:cd: Installation

Compatibility

:rocket: Usage

{{#content-placeholders as |placeholder|}}
  {{placeholder.heading img=true}}
  {{placeholder.text lines=3}}
{{/content-placeholders}}

{{#content-placeholders rounded=true as |placeholder|}}
  {{placeholder.img}}
  {{placeholder.heading}}
{{/content-placeholders}}

Available components and properties

• root content-placeholders

  • Boolean animated (default: true)
  • Boolean rounded (default: false) - border radius
  • Boolean centered (default: false)

  properties from root component are automatically passed down to each one of yielded components, so they can be overriden whenever necessary per comoponent case

• yield placeholder.heading

  • Boolean img (default: false)

• yield placeholder.text

  • Number lines (default: 4)

• yield placeholder.img

• yield placeholder.nav

TO DO:

• placeholder.list
• placeholder.chart
• placeholder.table

Customization

Composable components make it easy to form a required module, but sometimes it's not enough. If you'd like to also amend styling, there are few variables that can help you out:

• $ember-content-placeholders-primary-color - heading background
• $ember-content-placeholders-secondary-color - light background
• $ember-content-placeholders-border-radius - border radius size when rounded property is true
• $ember-content-placeholders-line-height - single line height
• $ember-content-placeholders-spacing - distance between lines

:beers: Contributing

Installation

• Fork this repo
• git clone https://github.com/{YOUR_USERNAME}/ember-content-placeholders
• cd ember-content-placeholders
• yarn install

Usage

[Longer description of how to use the addon in apps.]

Contributing

See the Contributing guide for details.

:lock: License

This project is licensed under the MIT License.