Ember Content Placeholders Save

Composable components for rendering fake (progressive) content like facebook

Project README


NPM version Build Status

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}}

rendered example

{{#content-placeholders rounded=true as |placeholder|}}

rendered example

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


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


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


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


  • yarn lint:js
  • yarn lint:js --fix

Running tests

  • ember test – Runs the test suite on the current Ember version
  • ember test --server – Runs the test suite in "watch mode"
  • yarn test – Runs ember try:each to test your addon against multiple Ember versions

Running the dummy application

For more information on using ember-cli, visit https://ember-cli.com/.

:lock: License

This project is licensed under the MIT License.

Open Source Agenda is not affiliated with "Ember Content Placeholders" Project. README Source: michalsnik/ember-content-placeholders
Open Issues
Last Commit
1 year ago

Open Source Agenda Badge

Open Source Agenda Rating