A small collection of customizable SVG components to create placeholder loading indicators instead of spinner, like cards loading.
npm i @osynlig/os-placeloader --save
import { PlaceloaderModule } from '@osynlig/os-placeloader';
@NgModule({
imports: [
PlaceloaderModule
]
});
<os-placeloader speed="2200" primaryColor="rgb(220, 221, 222)" height="74" width="399">
<svg:g code></svg:g>
</os-placeloader>
<os-placeloader speed="2200" primaryColor="#dcddde" height="157" width="399">
<svg:g facebook></svg:g>
</os-placeloader>
<os-placeloader speed="2200" primaryColor="#dcddde" height="120" width="399">
<svg:g content></svg:g>
</os-placeloader>
<os-placeloader speed="2200" primaryColor="#dcddde" height="124" width="399">
<svg:g list></svg:g>
</os-placeloader>
- content
- list
- code
speed | number | 1200 |
animation speed |
primaryColor | string | #dcddde |
placeloader color can be in rgb(), rgba(), hsl(), hsla() or #hex |
width | number | 320 |
width of the placeloader |
height | number | 100 |
height of the placeloader |
Fork the repo then clone it
$ git clone git@github.com:osynligab/placeloader.git
cd into the folder
Install the dependencies
$ yarn
or npm i
Run the demo app
$ npm start
- Build demo page