SCSS Library For Drawing Progress Circles

Category: CSS & CSS3 , Loading | May 22, 2020
Author:radiance
Views Total:1,334 views
Official Page:Go to website
Last Update:May 22, 2020
License:MIT

Preview:

SCSS Library For Drawing Progress Circles

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>

You Might Be Interested In:


Leave a Reply