circular-progress - GitLite

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #ai #llm #golang #machine-learning #deep-learning #nodejs #java #cli #mcp #openai

circular-progress

(★ 251)

🌀 Circular progress widget, dependency-free and configurable.

File Explorer

Download Latest Version (.zip)

- index.html
.gitignore
bower.json
circular-progress.js
circular-progress.min.js
circular-progress.min.map
Gruntfile.js
LICENSE
package.json
README.md
yarn.lock

# Installation Guide

1. Get the code

git clone https://github.com/gregberge/circular-progress

Downloads the entire project code from GitHub to your computer.

cd circular-progress

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

npm install

Downloads and installs the libraries listed in package.json.

npm start

Starts the development/run server.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Circular Progress

A JavaScript circular progress widget, dependency-free and configurable.

<img src="http://f.cl.ly/items/2l072A342Z2T3P3X2r2d/Screen%20Shot%202013-04-29%20at%206.50.21%20PM.png" width="278" alt="Example">

## Example

```javascript
var progress = new CircularProgress({
  radius: 70,
  strokeStyle: 'black',
  lineCap: 'round',
  lineWidth: 4
});

document.body.appendChild(progress.el);

progress.update(40);
```

## Usage

### new CircularProgress( options )

Other attributes are attached to the canvas 2D context.

Options :

* all 2D context properties.
* `text` : Scopped to text, accept `value` and all 2D context properties.
* `initial` : Scopped to initial circle, accept all 2D context properties.

Example :

```javascript
progress = new CircularProgress({
  lineWidth: 2,
  initial: {
    strokeStyle: 'gray',
    lineWidth: 4
  }
});

// update options
progress.options.text = {
  font: '14px'
};
```

### update( value )

Update percent and draw the canvas, `value` must be a float between 0 and 100.

## License

MIT