A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://github.com/Gbuomprisco/ngx-content-loading below:

Gbuomprisco/ngx-content-loading: Angular component to create SVG loading placeholders

ngx-content-loading v0.1.4

Angular component to create SVG loading placeholders. Inspired by the awesome React Content Loader.

Have a look at a demo app on Stackblitz

npm i --save ngx-content-loading
Import the module in your app module
import { NgxContentLoadingModule } from 'ngx-content-loading';

@NgModule({
    imports: [ NgxContentLoadingModule ]
})
export class AppModule {}
<ngx-content-loading [width]="800">
    <svg:g ngx-facebook-preset></svg:g>
</ngx-content-loading>

<ngx-content-loading [width]="800" [height]="800">
    <svg:g ngx-instagram-preset></svg:g>
</ngx-content-loading>
- ngx-facebook-preset
- ngx-instagram-preset
- ngx-code-preset
- ngx-list-preset
- ngx-bullet-list-preset
<ngx-content-loading 
    [speed]="'1500ms'"
    [width]="1000"
    [height]="300"
    [primaryColor]="'#222'"
    [secondaryColor]="'#5e5e5e'">
    <svg:g ngx-circle cy="30" cx="30" r="30" ry="5"></svg:g>
      <svg:g ngx-rect width="150" height="10" y="10" x="70" rx="5" ry="5"></svg:g>
      <svg:g ngx-rect width="90" height="10" y="40" x="70" rx="5" ry="5"></svg:g>
      <svg:g ngx-rect width="210" height="10" y="70" x="0" rx="5" ry="5"></svg:g>
      <svg:g ngx-rect width="240" height="10" y="100" x="0" rx="5" ry="5"></svg:g>
  </ngx-content-loading>
Name Type Default Description speed Number 1000ms Animation speed specified in s or ms width Number 400 viewBox width of SVG height Number 130 viewBox height of SVG primaryColor String #f3f3f3 Background the SVG secondaryColor String #ecebeb Animation color preserveAspectRatio String xMidYMid meet Aspect ratio option of SVG Transclude elements before and after the SVG element
<ngx-content-loading 
    [speed]="'1500ms'"
    [width]="1000"
    [height]="300"
    [primaryColor]="'#222'"
    [secondaryColor]="'#5e5e5e'">
        <b before-svg>
            I am transcluded before the svg
        </b>
        <svg:g ngx-circle cy="30" cx="30" r="30" ry="5"></svg:g>
        <svg:g ngx-rect width="150" height="10" y="10" x="70" rx="5" ry="5"></svg:g>
        <svg:g ngx-rect width="90" height="10" y="40" x="70" rx="5" ry="5"></svg:g>
        <svg:g ngx-rect width="210" height="10" y="70" x="0" rx="5" ry="5"></svg:g>
        <svg:g ngx-rect width="240" height="10" y="100" x="0" rx="5" ry="5"></svg:g>
        
        <b after-svg>
            I am transcluded after the svg
        </b>
  </ngx-content-loading>

Fork the repo then clone it

$ git clone git@github.com:YourUsername/ngx-content-loading.git && cd ngx-content-loading

Install the dependencies

$ yarn or npm i

Run the demo app

$ npm start

MIT

Please notice this is a work in progress and may not be ready for production usage.

More presets and options will follow soon :)


RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4