Skip to content

marinewater/circle-progress

Repository files navigation

npm (tag)

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%;