Angular Preloaders

• Install using npm i ngx-preloader
• Github repository
• Report Issues

Documentation

• Ben10 Preloader by Sumit Ranjan

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 Loader by Sumit Ranjan

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 by Sumit Ranjan

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 by Sumit Ranjan

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 by Mohsen Khakbiz

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 by Codrin Pavel

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 by Mathieu Richard

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 by kota shimura

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.