Network Pipe Manufacturer

    ngx-preloader
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.3 • Public • Published

    Angular Preloaders

    Documentation

    ben10 preloader with default color black and white having width 60px

    <ben10></ben10>
    

    ben10 preloader with color black and color2 white having width 100px. Please note: color or color2 should not start with #

    <ben10 [color]="'000000'" [color2]="'ffffff'" [width]="100"></ben10>
    

    zooming preloader with default color #764237 having default minWidth and maxWidth 50px and 130px respectively.

    <zooming></zooming>
    

    zooming preloader with color #764237 having minWidth and maxWidth 50px and 130px respectively.

    <zooming [color]="'764237'" [minWidth]="60" [maxWidth]="140"></zooming>
    

    multicircle preloader with default colors 'fc7670', 'ebd793', '6ed1b7', '38a484', '365050' having minWidth and maxWidth 50px and 130px respectively.

    <multicirle></multicirle>
    

    multicircle preloader with colors 'fc7670', 'ebd793', '6ed1b7', '38a484', '365050' having minWidth and maxWidth 60px and 140px respectively. Note colors length should be 5

    <multicirle [colors]="['fc7670', 'ebd793', '6ed1b7', '38a484', '365050']" [minWidth]="60" [maxWidth]="140"></multicirle>
    

    flat-loader have default config like position top, color #be3118, direction left and height 5px

    <flat-loader></flat-loader>
    

    flat-loader can have position top || bottom, color any HEX color starting with #, direction left || right and height any valid height

      <flat-loader [position]="'bottom'" [color]="'#be3118'" [direction]="'right'" [height]="'10px'"></flat-loader>
    

    wave preloader having default color f35353 and color2 ffffff with width 100px

    <wave></wave>
    

    wave preloader with color f35353 and color2 fcfcfc having width 120px

    <wave [color]="'f35353'" [color2]="'fcfcfc'" [width]="120"></wave>
    

    bouncy-circle preloader having default colors '457B9D', 'E63946', 'DAD7CD', '392F5A' and width 100px

    <bouncy-circle></bouncy-circle>
    

    bouncy-circle preloader with colors '457B9D', 'E63946', 'DAD7CD', '392F5A' having width 200px. Note colors length should be 4

    <bouncy-circle [colors]="['457B9D', 'E63946', 'DAD7CD', '392F5A']" [width]="200"></bouncy-circle>
    

    rolling preloader have default config as below <rolling></rolling>. All below config can be modified to meet your need and can be used as shown <rolling [config]="config"></rolling>

    config: RollingConfig = {
      loadingText: 'Loading',
      bgColor: '#347fc3',
      color: '#fff',
      barHeight: '2px',
      minSideLen: '60px',
      maxSideLen: '150px',
      radius: '30%',
      right: '-85px'
    }
    

    bouncy ball have default config as below <bouncy-ball></bouncy-ball>. Modify config to meet your need and can be used as shown <bouncy-ball [config]="config"></bouncy-ball>. Please note: More config will be coming, so watch this space.

    config: BouncyBallConfig = {
      color: '#fbae17',
      text: 'Now Loading'
    }
    

    Few Announcement for coming days

    • More preloaders are coming. Provide your suggesstions here with label loader request
    • Demo page will be coming soon - we've started working on it.

    Install

    npm i ngx-preloader

    DownloadsWeekly Downloads

    2

    Version

    0.0.3

    License

    MIT

    Unpacked Size

    230 kB

    Total Files

    43

    Last publish

    Collaborators

    • sumitranjan52