circularprogressbars's Introduction

Circular Progress Bars

About

This is my First Javascript Library for Creating Circular Progress Bars for your HTML Project.

Make Your Own Circle Shaped progress bars with one line of code

🎥 Demo / Working

Live Demo

Output Image

Installation

A step by step series of examples that tell you how to install this library

Add this code before the body closing tag </body> tag of your HTML Document

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Circular Progress Bars</title>
</head>
<body>
    <script src="https://kumarlakshmanan.github.io/Libraries/circularProgressBars/circularProgressBars.js"></script>
</body>
</html>

Add this Class for your Div Tag

<div class="circularProgressBar"></div>

Usage

  <div
    class="circularProgressBar"
    data-percent="93"
    data-size="357"
    data-backgroundcolor="none"
    data-primarycolor="#7a7a7a"
    data-secondarycolor="blue"
    data-primarywidth="2"
    data-secondarywidth="2"
  ></div>

Explanation

data-pencent         => The Pencentage of Progressbar
data-size            => The Total width and height of the Progressbar
data-backgroundcolor => The Background COlor of Progressbar
data-primarycolor    => The filled area color of the Progressbar
data-secondarycolor  => The unfilled area color of the Progressbar
data-primarywidth    => The unfilled area width of the Progressbar
data-secondarywidth  => The unfilled area width of the Progressbar

Recommend Projects