Canvas progressBar

Canvas progressBar

Released 7 years ago , Last update 7 years ago

Canvas progress bar managed via javascript

A Javascript class used to create and manage canvas progress bars.

  • Customizable colors and opacity for background, foreground and blocks in the bar
  • Customizable width, height, borders and corners
  • Functions to set and get the actual progress / position
  • Works very well on every type of backgrounds
  • Horizontal or vertical
  • Framework independent¬†

Pricing

14 day 14-day money-back guarantee

$4.99

Personal License

  • Perpetual license

  • 1 site, unlimited servers

  • No distribution (hosted use only)

  • Commercial use

README

Usage:

var mypb = new progressBar("canvasID",{
     numberBlocks:30,
     width:300,
     height:25,
     angleRadius:5,
     borderSize:2,
     backColor:[0,184,245,0.8],
     frontColor:[0,0,0,0.8],
     blockColor:[102,255,51,1],
     vertical:false,
     flip:true
  });

  mypb.setPerc(57);

 

Options:

  • numberBlocks: number of blocks to create inside the progress bar - Integer
  • width: width of the progress bar - Integer
  • height: height of the progress bar - Integer
  • angleRadius: the radius of the corners - Integer
  • borderSize: border size - Integer
  • backColor: background color - array(R,G,B,Alpha)
  • frontColor: foreground color - array(R,G,B,Alpha)
  • blockColor: blocks color - array(R,G,B,Alpha)
  • vertical: true if the bar must be vertical - boolean
  • flip: true to flip the bar (reverse progress) - boolean

All options are optional

Default values

numberBlocks:30,
  width:300,
  height:25,
  angleRadius:5,
  borderSize:4,
  backColor:[0,184,245,0.8],
  frontColor:[255,255,255,0.8],
  blockColor:[0,184,245,0.8],
  vertical:false,
  flip:false

Functions:

  • setPerc(int perc,[not clear]): set the percentage of the progress bar.
    • 'perc' arg must be between 0 and 100.¬†
    • 'not clear' arg is optional.
      • if true, the progress bar will be redrawn without clear the canvas
  • int getPerc(): return the actual percentage of the progress bar
  • int getPos(): return the actual position (in pixel)
2 licenses, starting from From » $4.99 View Licenses

Get A Quote

What do you need?
  • Custom development
  • Integration
  • Customization / Reskinning
  • Consultation
When do you need it?
  • Soon
  • Next week
  • Next month
  • Anytime

Thanks for getting in touch!

Your quote details have been received and we'll get back to you soon.


Or enter your name and Email
No comments have been posted yet.