Awesome Open Source
Awesome Open Source

ember-content-placeholders

NPM version Build Status

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

💿 Installation

ember install ember-content-placeholders

🚀 Usage

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

rendered example

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

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

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

🍻 Contributing

Installation

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

Linting

  • 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/.

🔒 License

This project is licensed under the MIT License.


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
javascript (68,034) 
loader (159) 
ember (130) 
ember-addon (67) 
lazy-loading (62) 

Find Open Source By Browsing 7,000 Topics Across 59 Categories

Advertising 📦 10
All Projects
Application Programming Interfaces 📦 124
Applications 📦 192
Artificial Intelligence 📦 78
Blockchain 📦 73
Build Tools 📦 113
Cloud Computing 📦 80
Code Quality 📦 28
Collaboration 📦 32
Command Line Interface 📦 49
Community 📦 83
Companies 📦 60
Compilers 📦 63
Computer Science 📦 80
Configuration Management 📦 42
Content Management 📦 175
Control Flow 📦 213
Data Formats 📦 78
Data Processing 📦 276
Data Storage 📦 135
Economics 📦 64
Frameworks 📦 215
Games 📦 129
Graphics 📦 110
Hardware 📦 152
Integrated Development Environments 📦 49
Learning Resources 📦 166
Legal 📦 29
Libraries 📦 129
Lists Of Projects 📦 22
Machine Learning 📦 347
Mapping 📦 64
Marketing 📦 15
Mathematics 📦 55
Media 📦 239
Messaging 📦 98
Networking 📦 315
Operating Systems 📦 89
Operations 📦 121
Package Managers 📦 55
Programming Languages 📦 245
Runtime Environments 📦 100
Science 📦 42
Security 📦 396
Social Media 📦 27
Software Architecture 📦 72
Software Development 📦 72
Software Performance 📦 58
Software Quality 📦 133
Text Editors 📦 49
Text Processing 📦 136
User Interface 📦 330
User Interface Components 📦 514
Version Control 📦 30
Virtualization 📦 71
Web Browsers 📦 42
Web Servers 📦 26
Web User Interface 📦 210