Skip to content

Latest commit

 

History

History
100 lines (80 loc) · 2.26 KB

README.md

File metadata and controls

100 lines (80 loc) · 2.26 KB
Raw

CircularProgressBar

An SVG circular progress bar initailizable with javascript. See demo/index.html to see possibilities.

Getting started

  • Load CSS and JS files:
<link rel="stylesheet" href="src/circular-progressbar.css"/>
<script src="src/CircularProgressBar.class.js"></script>
  • Init progressbar and append it to an HTML element:
var progress = new CircularProgressBar();
document.body.appendChild(progress.element);
  • Set progress value (by default values is between 0.0 and 1.0):
progress.value = 0.3;

API

Property max

  • Writable: true
  • Type: number
  • Default value: 1.0

Max value settable as progress.

Property value

  • Writable: true
  • Type: number|null
  • Default value: null

Progress value between 0 and max. If null, progress bar will rotate infinitely indicating that progress is unknown. Note: circular-progressbar.css is required only if value is null.

Property innerRayon

  • Writable: true
  • Type: number
  • Range: 0.0 - 1.0
  • Default value: 0.5

Rayon of inner transparent disk in percent of width/height of SVG element.

Property waitingFill

  • Writable: true
  • Type: number
  • Range: 0.0 - 1.0
  • Default value: 0.66

Angle of arc to display when value is null:

  • 0.0 is 0deg
  • 1.0 is 360deg

Property element

  • Writable: false
  • Type: SVGSVGElement

SVG element generated. It is possible de change the skin using javascript:

  • Color:
progress.element.setAttribute("fill", "#0080FF");
  • Size:
progress.element.setAttribute("width",  "100");
progress.element.setAttribute("height", "100");

progress.element.setAttribute("width",  "100px");
progress.element.setAttribute("height", "100px");

progress.element.setAttribute("width",  "20em");
progress.element.setAttribute("height", "20em");

progress.element.setAttribute("width",  "100%");
progress.element.setAttribute("height", "100%");

CSS class circular-progressbar

SVG element generated. It is possible de change the skin using CSS:

  • Color:
.circular-progressbar {
	fill: #0080FF;
}
  • Size:
.circular-progressbar {
	width: 100px;
	height: 100px;
}

CSS class circular-progressbar-waiting

SVG element generated when progressbar has no value (value === null).