ProgressCircle | Documentation

Introduction

ProgressCircle displays a circle that has a background color and is filled with another color. The fill level represents a progress between 0% and 100%. The circle has a hole in the middle (why didn't I call this progrject sk-progress-doughnut?) that can be used to display a short text (e.g. the current progress in percent).

The component is implemented as a Web Component using the awesome SkateJS project to normalize different browser behaviour and to include the polyfills required for some browsers.

Usage

Just include the compiled version and your're ready to use the web component.

The most imporant attribute is status:

Available attributes

Attributes can be set in the HTML markup or the DOM node or during runtime.

• backgroundColor

  Color to use for the background of the circle. Must be a valid color name or color value.

  Example

  HTML: <sk-progress background-color="#a9a9a9"></sk-progress>

  JavaScript: progress.backgroundColor = '#a9a9a9';

• color

  Color to use for the progress part of the circle

  Example

  HTML: <sk-progress color="#339900"></sk-progress>

  JavaScript: progress.color = '#339900';

• label

  Text to be used inside the circle to diplay the current status. The %s will be replaced with the actual number

  Example

  HTML: <sk-progress label="%s percent"></sk-progress>

  JavaScript: progress.label = '%s percent';

• labelColor

  Text color of the label

  Example

  HTML: <sk-progress label-color="darkgrey"></sk-progress>

  JavaScript: progress.labelColor = 'darkgrey';

• labelSize

  Font-size of the label

  Example

  HTML: <sk-progress label-size="24px"></sk-progress>

  JavaScript: progress.labelSize = '24px';

• size

  Width and height of the ciricle in pixels

  Example

  HTML: <sk-progress size="200"></sk-progress>

  JavaScript: progress.size = 200;

• status

  Progress status from 0 to 100

  Example

  HTML: <sk-progress status="33"></sk-progress>

  JavaScript: progress.status = 33;

Events

• change

  The change event is emitted every time the value of status is changed.

  Payload: status the current status of the component.