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.

<script src="node_modules/sk-progress-circle/dist/all.min.js">

The most imporant attribute is status:

<sk-progress status="75"></sk-progress>
Example of how the progress circle can look like
Example #1

Available attributes

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

Events