SCSS Library For Drawing Progress Circles

Preview:

Description:

An easy-to-use CSS/SCSS library used to draw simple plain circles & ring charts representing percentage values.

How to use it:

1. Override the default variables in the SCSS.

// background color
$default-content-background-color: #fff;

// border color
$default-border-color: #ccc;

// text color
$info-color: #33f;

2. Load the compiled stylesheet on the web page.

<link rel="stylesheet" href="css/styles.css" />

3. The HTML structure to draw a progress circle (10%).

<div class="progress-circle progressing p-10">
  <div class="progress-circle-border">
    <div class="left-half-circle"></div><div class="right-half-circle"></div>
  </div>
  <div class="progress-circle-content">
    1/10
  </div>
</div>