circle-progress

Demo

Table of contents

• Installation
• Usage
  • JS and CSS
  • SCSS
  • Typescript
• Styling
  • CSS
    • Background
    • Circle color
    • Circle progress color
    • Circle width
  • SCSS
    • Background
    • Circle color
    • Circle progress color
    • Circle width

Installation

npm install --save circle-progress-ts 

Usage:

• JS and CSS
• Scss
• Typescript

JS and CSS

Include stylesheet, e.g.

<link rel="stylesheet" type="text/css" href="node_modules/circle-progress-ts/dist/progress.css">

Include javascript, e.g.

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

Add div to html

<div class="circle"></div>

Add styling to your own css

.circle {
    width: 150px;
    height: 150px;
}

Initialize progress circle in JS

var circle = document.querySelector( '.circle' );
var p = new progress.Progress( circle );

Change progress

// change current progress to 20%
p.progress( 20 );

or animate progress change over time

// changes from current progress to 60% over 500ms
p.progress_animate( 60, 500 );

Scss

just import the scss file

@import "./node_modules/circle-progress-ts/sass/progress";

Typescript

// import circle progress lib
import { Progress } from 'circle-progress-ts';

// initialize
const circle = document.querySelector( '.circle' );
const p = new Progress( circle );

// change progress
p.progress( 20 );
p.progress_animate( 60, 500 );

Styling

• CSS
• SCSS

CSS

Example, Demo

• Background
• Circle color
• Circle progress color
• Circle width

Background

Usually the same as parent background

.circle .inner {
    background: #373737;
}

Circle color

color of the circle of the remaining progress

.circle .color {
    color: #fff;
}

Circle progress color

color of the circle of the completed progress

.circle .color {
    background-color: #f00;
}

Circle width

.circle .inner {
    width: 93%;
    height: 93%;
}

SCSS

Example, Demo

• Background
• Circle color
• Circle progress color
• Circle width

Background

Usually the same as parent background

$bg-color: #1c1d61;

Circle color

color of the circle of the remaining progress

$circle-color: #6c6c6c;

Circle progress color

color of the circle of the completed progress

$circle-progress-color: #ff9205;

Circle width

$circle-width: 7%;