Example #1: default

Image logo with default properties.

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

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

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

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).

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

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 %

Start

// Right to Left - jQuery
$('#jurassicrl').loadgo({
  'direction': 'rl'
});

0 %

Start

// Bottom to Top - jQuery
$('#jurassicbt').loadgo({
  'direction': 'bt'
});

0 %

Start

// Top to Bottom - jQuery
$('#jurassictb').loadgo({
  'direction': 'tb'
});

0 %

Start

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 %

Start

// Blur - jQuery
$('#spidermanBlur').loadgo({
  'filter': 'blur'
});

0 %

Start

// Invert - jQuery
$('#spidermanInvert').loadgo({
  'filter': 'invert'
});

0 %

Start

// Hue Rotate - jQuery
$('#spidermanHue').loadgo({
  'filter': 'hue-rotate'
});

0 %

Start

// Opacity - jQuery
$('#spidermanOpacity').loadgo({
  'filter': 'opacity'
});

0 %

Start

// Grayscale - jQuery
$('#spidermanGrayscale').loadgo({
  'filter': 'grayscale'
});

0 %

Start