About

Cyprobar is a light-weight javascript library that provides you a seamless way of creating circular progress bars. All you need to do is call a function, provide preference and cyprobar will take over from there.

Docs

Installation

1. Using CDN

<script src="https://cdn.jsdelivr.net/npm/cyprobar@1.0.0/dist/cyprobar.js"></script>

2. Use Package Manager

npm i cyprobar

3. Importing Cyprobar

If you are using imports, use the following to import Cyprobar

import CPB from 'cyprobar'

Initializing

To create the circular progress bar, call the draw method and pass in an object of your preference for the circular progress bar.

CPB.draw({ elementClass: "example" })

The above will create a circular progress bar with default preference.

NB: The draw() method only needs one argument which should be an object. Always provide the elementClass value in that object so cyprobar will know where to render the progress bar to.

Default Circular Progress Bar

CPB.draw({ elementClass: "example" }).

Table of Properties

Below are all the properties that can be passed in the object argument of the draw() method.

Properties	Function	Default Value	Possible Values
value	sets the value of the indicator and the center text	0	0 - maxValue
maxValue	sets the maximum value of the progress bar	100	any value
valueUnit	sets the unit in the center text	%	any unit (%, pt, cm etc.)
valueFont	sets the font-family of the center text	monospace	any browser font or font-stack
valueFontSize	sets the font size of the center text	60	10 - 100
barSize	sets progress bar size	200	0 - 1000
indicatorSize	sets the width of the indicator	15	0 - 40
trackSize	sets the with of the track	15	0 - 40
indicatorCap	sets how the ends of the indicator should look	acute-square	acute-square, square, round
barBgColor	sets inner background color	grey	any browser color or useGradient (default is used unless set)
trackColor	sets track color	#eee	any browser color or useGradient (default is used unless set)
indicatorColor	sets indicator color	black	any browser color or useGradient (default is used unless set)
valueColor	sets background color	black	any browser color or useGradient (default is used unless set)
barBgOpacity	sets background opacity	0	0 - 1
valueOpacity	sets the opacity of the center text	1	0 - 1
setText	sets a text for the center text other than the given value	CBP	any text
useText	replaces the center text with the set text	0	true or false (boolean)
setGradient	sets a gradient that can be used by any property that takes in a color value	[ ['rgba(0, 0, 0, 1)', 0], ['rgba(0, 0, 0, 0.5)', 50], ['rgba(0, 0, 0, 0.2)', 100] ]	multi-dimension array of colors and their corresponding stops

Examples

Let's play around with the values in the above table.

1.

CPB.draw({ elementClass: 'example2', value: "40", trackColor: "grey", indicatorColor: "orange", valueColor: "orange" });

2.

CPB.draw({ elementClass: 'example3', value: 2.7, barSize: 150, maxValue: 10, valueUnit: 'cm', trackColor: 'pink', indicatorColor: 'rgb(214, 122, 127)', indicatorSize: 30, trackSize: 10, indicatorCap: 'square', valueFont: 'serif' });

3.

CPB.draw({ elementClass: 'example4', value: 567, maxValue: 1000, valueUnit: 'km', valueFontSize: 60, indicatorColor: '#f0e68c', trackColor: '#4682b4', trackSize: 40, indicatorSize: 20, indicatorCap: 'round', valueColor: '#f0e68c', barBgColorOpacity: 1, barBgColor: '#4682b4', barSize: 220 });

4.

CPB.draw({ elementClass: 'example5', value: 75, indicatorColor: '#ff00ff', trackColor: '#191970', trackSize: 35, indicatorSize: 6, indicatorCap: 'round', valueColor: '#191970', barBgColorOpacity: 1, barBgColor: '#ff00ff', valueFontSize: 80, valueFont: 'cursive, monospace' });

5.

CPB.draw({ elementClass: 'example6', value: 21, maxValue: 50, valueUnit: 'pt', valueFontSize: 60, indicatorColor: 'useGradient', trackColor: '#ccc', trackSize: 20, indicatorSize: 20, indicatorCap: 'round', valueColor: 'useGradient', barBgColorOpacity: 0, barBgColor: '#b22222', barSize: 180, setGradient: [ [ "#572c82", 0], [ "#49a09d", 50] ], useGradient: true });

6.

CPB.draw({ elementClass: 'example7', value: 95, maxValue: 100, valueUnit: 'pt', valueFont: 'arial, sans-serif', valueFontSize: 40, indicatorColor: 'useGradient', trackColor: '#ccc', trackSize: 20, indicatorSize: 20, indicatorCap: 'acute-square', valueColor: 'useGradient', barBgColorOpacity: 0, barBgColor: '#b22222', barSize: 180, setGradient: [ [ "#a8e6ce", 0], [ "#dcedc2", 20], [ "#ffd385", 40], [ "#ffaaa6", 60], [ "#ff8c94", 80] ], setText: 'Loading...', useText: true });

Using Gradients

To use a gradient on any property that takes in any browser color value, assign a value of useGradient. Gradients should be set using the setGradient property, if no gradient is set and the useGradient is called the default gradient will be used.

Setting Gradients

To set a gradient, pass in a multi-dimensional array of the colors you want in the gradient and their corresponding stops to the setGradient property.

Eg. The setGradient value should be in the below format.


                        [

                           ["color1", "stop1"],

                           ["color1", "stop1"],

                           ["color3", "stop3"]

                        ]

NB. The color value must come first before the stop value. Stop values range from 0 to 100.

Setting and Using Text Instead of Value

By default, the center text comprises of the given value and unit. To use a certain text instead of the default, assign the text to the setText property and set the useText property to true. The useText property should only take in a boolean value.