ember-content-placeholders

ember-content-placeholders

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

:cd: Installation

• ember install ember-content-placeholders

: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

🔓 License

See the LICENSE file for license rights and limitations (MIT).