Aurelia Content Loader

SVG-Powered component to easily create placeholder loadings (like Facebook's cards loading).

Index

• Aurelia Content Loader
  • Index
  • Getting Started
  • Usage
  • Options
  • Examples
    • Facebook Component
    • Instagram Component
    • Code Component
      • Additional Options
    • List Component
      • Additional Options
      • Bullet list Style
    • Custom Component
  • Extending component
    • Javascript Class
    • Importing new component
    • Using within HTML Templates
  • Similar packages
  • Development
  • License

Getting Started

npm i aurelia-content-loader --save

or

yarn add aurelia-content-loader

Usage

In your aurelia main.js add:

aurelia.use.plugin(PLATFORM.moduleName('aurelia-content-loader'));

Options

Examples

Facebook Component

<svg-facebook-loader
  animate="1"
  corner-radius="3"
  image-as-circle="1"
></svg-facebook-loader>

Instagram Component

<svg-instagram-loader
  animate="1"
  height="220"
  corner-radius="3"
  image-as-circle="1"
></svg-instagram-loader>

Code Component

<svg-code-loader
  animate="1"
></svg-code-loader>

Additional Options

List Component

<svg-list-loader
  animate="1"
  corner-radius="3"
></svg-list-loader>

Additional Options

Bullet list Style

<svg-list-loader
  animate="1"
  bullets="1"
  bullets-as-squares="1"
></svg-list-loader>

Custom Component

<svg-content-loader
  animate="1"
>
  <rect x="0" y="0" rx="3" ry="3" width="60" height="60"></rect>
 
  <rect x="70" y="15" rx="3" ry="3" width="250" height="7"></rect>
  <rect x="70" y="37" rx="3" ry="3" width="200" height="7"></rect>
 
  <rect x="0" y="75" rx="3" ry="3" width="320" height="7"></rect>
  <rect x="0" y="92" rx="3" ry="3" width="320" height="7"></rect>
</svg-content-loader>

Extending component

Javascript Class

Let's say ./resources/elements/custom-loader.js.

import { bindable, containerless, customElement, inlineView } from 'aurelia-templating';
 
import { SvgContentLoader } from 'aurelia-content-loader/content-loader';
import { template } from 'aurelia-content-loader/template';
 
/** @var {String} */
const divTemplate = '';
 
/** @var {String} */
const svgTemplate = `<rect x="0" y="0" rx="3" ry="3" width="60" height="60"></rect>
 
<rect x="70" y="15" rx="3" ry="3" width="250" height="7"></rect>
<rect x="70" y="37" rx="3" ry="3" width="200" height="7"></rect>
 
<rect x="0" y="75" rx="3" ry="3" width="320" height="7"></rect>
<rect x="0" y="92" rx="3" ry="3" width="320" height="7"></rect>`;
 
/**
 * 
 */
@containerless
@customElement('svg-custom-loader')
@inlineView(template(divTemplate, svgTemplate))
export class SvgCustomLoader extends SvgContentLoader { }

Importing new component

Add to ./resources/index.js.

import { PLATFORM } from 'aurelia-pal';
 
export function configure(aurelia) {
  aurelia.globalResources(PLATFORM.moduleName('resources/elements/custom-loader'));
}
 

Using within HTML Templates

<svg-custom-loader
  animate="1"
></svg-custom-loader>

Similar packages

• React
• React Native;
• Preact;
• Vue.js: vue-content-loading, vue-content-loader;
• Angular.

Development

Fork the repo then clone it

$ git clone git@github.com:dragoscirjan/aurelia-content-loader-dev.git && cd aurelia-content-loader

yarn global add gulp-cli (or $ npm install --global gulp-cli): Install Gulp cli tool.

$ yarn (or $ npm i): Install the dependencies;

$ yarn build (or $ npm run build): Build to production;

$ yarn dev: Run the docz to see your changes;

Momentarely I do not use the testing environment. I'm using this project to develop. You're all invited to help with the unit tests, if you wish to.

$ yarn test: Run all tests: type checking and unit tests;

$ yarn test:watch: Watch unit tests;

$ yarn tsc: Typescript checking;

$ yarn tsc:watch: Typescript checking with watching;

License

MIT