All Projects → concordnow → ember-content-loader

concordnow / ember-content-loader

Licence: MIT license
Easy, customizable content placeholders / skeletons screens

Programming Languages

javascript
184084 projects - #8 most used programming language
Handlebars
879 projects
HTML
75241 projects
CSS
56736 projects

Projects that are alternatives of or similar to ember-content-loader

ember-cli-string-helpers
Set of the String helpers extracted from DockYard's ember-composable-helpers.
Stars: ✭ 73 (+78.05%)
Mutual labels:  ember-cli, ember, ember-addon
Ember Decorators
Useful decorators for Ember applications.
Stars: ✭ 360 (+778.05%)
Mutual labels:  ember-cli, ember, ember-addon
ember-cli-ifa
Ember CLI addon for injecting fingerprinted asset map file into Ember app
Stars: ✭ 54 (+31.71%)
Mutual labels:  ember-cli, ember, ember-addon
Ember Content Placeholders
Composable components for rendering fake (progressive) content like facebook
Stars: ✭ 121 (+195.12%)
Mutual labels:  ember, loader, ember-addon
Ember Cli Stripe
Stripe checkout for Ember
Stars: ✭ 84 (+104.88%)
Mutual labels:  ember-cli, ember, ember-addon
ember-luxon
🕐 🌐 [deprecated] Addon thats brings Luxon to Ember applications.
Stars: ✭ 20 (-51.22%)
Mutual labels:  ember-cli, ember, ember-addon
ember-credit-card
"make your credit card form dreamy in one line of code"
Stars: ✭ 89 (+117.07%)
Mutual labels:  ember-cli, ember, ember-addon
Ember Simple Auth Auth0
Auth0 + lock.js, built on ember-simple-auth
Stars: ✭ 53 (+29.27%)
Mutual labels:  ember-cli, ember, ember-addon
Ember Cli Bundle Analyzer
Analyze the size and contents of your Ember app's bundles
Stars: ✭ 78 (+90.24%)
Mutual labels:  ember-cli, ember, ember-addon
Ember Cli Coffeescript
Adds precompilation of CoffeeScript files and all the basic generation types to the ember generate command.
Stars: ✭ 72 (+75.61%)
Mutual labels:  ember-cli, ember, ember-addon
ember-template-inspector
An ember add-on which opens the template file in the code editor while inspecting an element.
Stars: ✭ 15 (-63.41%)
Mutual labels:  ember-cli, ember, ember-addon
Ember Cli Notifications
⚛ Atom inspired notification messages for ember-cli
Stars: ✭ 168 (+309.76%)
Mutual labels:  ember-cli, ember, ember-addon
ember-cli-nouislider
{{range-slider}} component for ember-cli powered by noUiSlider
Stars: ✭ 43 (+4.88%)
Mutual labels:  ember-cli, ember, ember-addon
labs-factfinder
New York City Census Reporting Tool
Stars: ✭ 34 (-17.07%)
Mutual labels:  ember-cli, ember
ember-cli-geo
Geolocation service for Ember.js web apps
Stars: ✭ 48 (+17.07%)
Mutual labels:  ember-cli, ember
ember-responsive-image
Automatically generate resized images at build-time, optimized for the responsive web, and using components to render them easily as <picture> elements.
Stars: ✭ 103 (+151.22%)
Mutual labels:  ember, ember-addon
ember-lazy-responsive-image
Generate and render responsive, lazy loaded, LQIP enabled images
Stars: ✭ 14 (-65.85%)
Mutual labels:  ember, ember-addon
ember-on-modifier
Implements the `{{on eventName this.someAction}}` element modifier from https://github.com/emberjs/rfcs/blob/master/text/0471-on-modifier.md
Stars: ✭ 37 (-9.76%)
Mutual labels:  ember, ember-addon
ember-i18n-cp-validations
ember-i18n support for ember-cp-validations
Stars: ✭ 20 (-51.22%)
Mutual labels:  ember, ember-addon
ember-validity-modifier
Ember Octane addon to add custom validity (form validation) to form fields
Stars: ✭ 28 (-31.71%)
Mutual labels:  ember, ember-addon

ember-content-loader

Build Status Ember Observer Score This project is using Percy.io for visual regression testing.

SVG-Powered component to easily create skeleton screens / placeholder loadings (like Facebook's cards loading). Documentation can be found here

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

Simply add the <ContentLoader> component in your code with the shapes that you want.

<ContentLoader>
  {{!-- Only SVG shapes --}}
  <rect x="70" y="15" rx="4" ry="4" width="117" height="6.4" />
  <rect x="70" y="35" rx="3" ry="3" width="85" height="6.4" />
  <rect x="0" y="80" rx="3" ry="3" width="350" height="6.4" />
  <rect x="0" y="100" rx="3" ry="3" width="380" height="6.4" />
  <rect x="0" y="120" rx="3" ry="3" width="201" height="6.4" />
  <circle cx="30" cy="30" r="30" />
</ContentLoader>

You can use the online editor to create complex shapes.

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

Options

You can find all <ContentLoader> available options here

Thanks

Contributing

See the Contributing guide for details.

License

This project is licensed under the MIT License.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].