Arc-shaped progress bar plugin drawn using canvas: arc-progress.js

Add-ons

2026-07-26 01:06 3 次浏览 • 0 次下载 40.1KB

Arc-shaped progress bar plugin drawn using canvas: arc-progress.js

Plugin Description: An arc-shaped progress bar drawn using canvas. Pure JavaScript with no dependencies. Supports custom drawing angles, sizes, gradient colors, animation speeds, and animated number increments.

Last Updated: 2019-09-19 23:18:54

arc-progress.js

Installation

1	`npm install arc-progress -S`

Usage

Arc-shaped progress bar drawn using canvas

<div id='progress-container'></div>
<script>
  const customText = [{text: '%', size: '12px', color: '#000', x: 142, y:102}];
 
  const arcProgress = new ArcProgress({
    el: '#progress-container',
    progress: .68,
    speed: 5,
    value: '5439.92',
    size: 200,
    customText,
    observer(e, t) {
      console.log('observer the animation', e, t);
    },
    animationEnd(e) {
      console.log('the animation is end', e);
    }
  });
</script>

When using it in React or VUE, instantiate it during the component lifecycle to obtain the actual DOM node.

In React code:

import ArcProgress from 'arc-progress';
class App extends React.Component {  componentDidMount() {    const customText = [{text: '%', size: '12px', color: '#000', x: 142, y:102}];    
const arcProgress = new ArcProgress({
      el: '#progress-container',
      progress: .68,
      speed: 5,
      value: '5439.92',
      size: 200,
      customText,      observer(e, t) {        console.log('observer the animation', e, t);
      },      animationEnd(e) {        console.log('the animation is end', e);
      }
    });
  }  render() {    return(      <div>
        <div id='progress-container' />
      </div>
    );
  }
}

Options

Pass the following optional options during initialization:

Options	Type	Description
el	string or dom (required)	The container's class or ID name, or a direct reference to the DOM node.
progress	number (required)	Set the progress bar value. Range: 0 - 1
size	number	Set the size of the generated progress bar canvas container. Defaults to 200.
text	string	Set the progress bar text.
arcStart	number	Set the starting point of the circular arc. See below for details.
arcEnd	number	Set the ending point of the circular arc. See below for details.
thickness	number	Set the thickness of the circular progress bar.
fillThickness	number	Set the thickness of the circular progress bar's filled area. If omitted, it defaults to the same value as `thickness`.
emptyColor	string	Set the color of the unfilled portion of the circular progress bar.
fillColor	string or object	Set the style of the filled portion of the circular progress bar. Supports solid colors, gradients, and image fills. See below for details.
lineCap	string	Set the line cap style of the circular progress bar. Three values are available: `butt`, `round`, and `square`. The default value is `round`.
speed	number	Set the animation speed threshold. Range: -100 to 100. Defaults to 0.
animation	boolean or number	Set the animation duration in milliseconds. When set to `false`, no transition animation is applied.
textStyle	object	Set the text style. See below for details.
customText	array	Set custom text content. See below for details.
animationEnd	function	Callback triggered when the progress bar animation ends.
onError	function	Error handling callback.
observer	function	Callback triggered when the progress bar animation changes.

Methods

Methods available after initialization:

Name	Description
updateProgress	Method for updating the progress bar. Pass the optios parameter, which uses the same options as above (without the `el` parameter).
destroy	Method for destroying the progress bar.

Options Description

arcStart and arcEnd

As shown in the diagram, the arc's starting and ending points are marked, with the direction moving clockwise. To draw a circular progress bar, you can set`arcStart`to`-90`，`arcEnd` to `270`. To draw a semicircular progress bar, you can set`arcStart` to `180` and `arcEnd` to `360`. Adjust the starting and ending angles as needed.

fillColor

fillColor defines the color of the filled progress bar. You can pass a color value to specify the color, such as (#fe4d3c).

To use a gradient fill, this parameter must be set to an object, for example, `{gradient: [color 1, color2, color 2]}`. This generates a radial gradient with three colors.

To use an image fill, set the parameter to an object in the format `{image: url}` and pass the image URL. For example, `fillColor: {image: '[http://img.com/fillImg](http://img.com/fillImg)'}` uses the specified image as the fill.

textStyle

The `text` parameter accepts text styling options in object format. Available options are as follows:

Name	Type	Description
size	string	Set the text size, e.g. `18px`.
color	string	Set the text color, e.g. `#fa0556`.
font	string	Set the text font, e.g. `Microsoft YaHei`.
x	number	Set the horizontal (x-axis) text alignment.
y	number	Set the vertical (y-axis) text alignment.

customText

The customText option allows you to customize text content. It uses an array format and supports multiple text entries. Each entry follows the same configuration as the `textStyle` parameter, with an additional `text` field.

Name	Type	Description
text	string	Set the text content.
others		Other parameters use the same configuration as `textStyle`.