0.0.5 • Published 5 years ago
aurelia-content-loader v0.0.5
Aurelia Content Loader
SVG-Powered component to easily create placeholder loadings (like Facebook's cards loading).
Index
Getting Started
npm i aurelia-content-loader --saveor
yarn add aurelia-content-loaderUsage
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
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;