LoadGo - jQuery Examples

Example #1: default

Image logo with default properties.

jQuery

$('#disney').loadgo();
0 %

Example #2: opacity, no transition animation and background color

Image logo with opacity set to 0.2, without width transition when changing progress and background set to #01AEF0

jQuery

$('#superman').loadgo({
  'opacity': 0.2,
  'animated': false,
  'bgcolor': '#01AEF0'
});
0 %

Example #3: image overlay

Image logo is the original (in this case, Batman's logo with yellow background) and overlay image is the one with some filter, or other effect pretty similar to the original image logo (in this case, Batman's logo with white background).

jQuery

$('#batman').loadgo({
  'opacity': 1,
  'image': 'batman-overlay.png'
});
0 %

Example #4: playing with directions

Loading animation can be set from: left to right (lt), right to left (rl), bottom to top (bt) or top to bottom (tb).

// Left to Right - jQuery
$('#jurassiclr').loadgo({
  'direction': 'lr'
});
0 %
// Right to Left - jQuery
$('#jurassicrl').loadgo({
  'direction': 'rl'
});
0 %
// Bottom to Top - jQuery
$('#jurassicbt').loadgo({
  'direction': 'bt'
});
0 %
// Top to Bottom - jQuery
$('#jurassictb').loadgo({
  'direction': 'tb'
});
0 %

Example #5: filters

CSS3 image filters applied for progress instead of an overlay. Filters can be: sepia, blur, invert, hue-rotate, opacity or gayscale.

// Sepia - jQuery
$('#spidermanSepia').loadgo({
  'filter': 'sepia'
});
0 %
// Blur - jQuery
$('#spidermanBlur').loadgo({
  'filter': 'blur'
});
0 %
// Invert - jQuery
$('#spidermanInvert').loadgo({
  'filter': 'invert'
});
0 %
// Hue Rotate - jQuery
$('#spidermanHue').loadgo({
  'filter': 'hue-rotate'
});
0 %
// Opacity - jQuery
$('#spidermanOpacity').loadgo({
  'filter': 'opacity'
});
0 %
// Grayscale - jQuery
$('#spidermanGrayscale').loadgo({
  'filter': 'grayscale'
});
0 %