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
  • Issues
  • 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

Option	Type	Default	Description
animate	Boolean	false	Optional. Activate animations with true, 1, any.
animate-duration	String	1s	Optional. Change to any time value. i.e. 10s.
css-class	String		Optional. Additional CSS classes to add on the main container of the component.
css-class-inner	String		Optional. Additional CSS classes to add on the inner container of the component.
height	Number	110	Optional. Represents the max height of the <svg />.
image-radius	Number	30	Optional. Radius of the main image (see Facebook or Instagram components) - does not matter if the image is a square. If square, image width/height will be the diameter (2 * radius).
image-as-circle	Boolean	false	Optional. Activate circle image with true, 1, any.
line-height	Number	7	Optional. Used for components like (Facebook, List and Code), represents the height of the lines representing texts. Can be changed to any number.
line-max-number	Number	5	Optional. Used for components like (Facebook, List and Code), represents the maximum number of rendered text lines. If given a very large number, the text lines will fill all the available space according to svg height.
line-padding	Number	5	Optional. Used for components like (Facebook, List and Code), represents the top/bottom padding of the lines representing texts. Can be changed to any number.
line-width-randomize	Boolean	false	Optional. Used for components like (Facebook, List), allows 'text' lines to have random widths.
width	Number	320	Optional. Represents the max width of the <svg />.
svg-direction	Number	ltr	Optional. Defines the orientation of the <svg />. Can be changed to rtl.
svg-preserve-aspect-ratio	String	none	Optional. Defaults to none. Read more in the preserveAspectRatio attribute documentation.

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

Option	Type	Default	Description
max-code-cuhnks	Number	5	Optional. Number of chunks in a line.

List Component

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

Additional Options

Option	Type	Default	Description
bullets	Boolean	false	Optional. Activate bullets with true, 1, any.
bullets-as-squares	Boolean	false	Optional. Activate rendering bullets as squares with true, 1, any.
bullet-radius	Number	5	Optional. Set the radius of the list's bullets.

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 [email protected]: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;

NOTE: 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;

Issues

For issues, please reffer to this repository's issue page.

License

MIT