From 42eec3f5c74d5637dedbbd1da0617ec27f11abe8 Mon Sep 17 00:00:00 2001 From: Edwin van der Ven Date: Wed, 12 Aug 2020 20:57:34 +0200 Subject: [PATCH] Updated the readme with instructions on how to install and configure this web component. --- README.md | 83 +++++++++++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 81 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 0bca71b..7c88641 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,82 @@ -# A simple loading animation +# Simple loading animation -This loading animation can (soon) be used in your HTML application. +This loading animation can be used in your HTML application. + +## Installation + +Inside the root of your Node project run the following command. + +```sh +npm i simple-loading-animation +``` + +## Usage + +### Import + +In order to use this web component it needs to be imported in your project. +Inside your Javascript (or Typescript) file add the following line. + +```sh +import 'simple-loading-animation/simple-loader.js'; +``` + +### HTML + +Now inside the HTML you can add the following element. + +```html + +``` + +#### Example + +This web component can be combined with any HTML from your own project. + +```html + + ... + + ... + +``` + +```css +.loading-state { + position: absolute; + top: 40%; + bottom: 0; + width: 100%; + text-align: center; + font-family: AvenirNextLTPro-Demi, Helvetica, Arial, sans-serif; + font-size: 18px; + color: #4d4d4d; +} +``` + +Don't forget to hide or remove the element again once the loading is done. + +### Notes + +For Angular projects you will need to add the custom scheme to support web components. +- See [the Angular documentation](https://angular.io/api/core/CUSTOM_ELEMENTS_SCHEMA) + +```js +import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; + +@NgModule({ + declarations: [ + ... + ], + imports: [ + ... + ], + providers: [ + ... + ], + bootstrap: [ + ... + ], + schemas: [ CUSTOM_ELEMENTS_SCHEMA ] +}) +```