achaak / circle-bar

This is a module to simply add a circle bar to your site.

circle-bar

This is a module to simply add a circle bar to your site.

Requirement :

• JQuery

Install :

Load the required files. Inside the page's head tag include the circle bar's CSS file.

<link rel="stylesheet" href="/your-path/circle-bar.css">

And in the page's footer, include the required javascript files.

<script src="/your-path/circle-bar.js"></script>

Initialize :

For initialize the circle bar, insert this example snippet and update this with your parameters. Exemple:

$(document).ready(function() {
    circleBar().init(
        "#circle-bar", 
        {
            text: "Insert your text",
            lineColor: "#1d8eff",
            lineBgColor: "rgb(150, 203, 255)",
            backgroundColor: "white",
            lineWidth: "15",
            lineWidthHover: "7",
            bgLineWidth: "10",
            bgLineWidthHover: "4",
            lineDuration: "200ms",
            lineDelay: "100ms",
            diameter: "300",
            viewPourcentage: true,
            textCSS: {
                "color": "#a0a0a0",
                "font-weight": "bold",
                "font-family": "Verdana, Arial, Helvetica, sans-serif",
                "font-size": "1rem"
            },
            textHoverCSS: {
                "font-size": "1.5rem",
                "color": "#1d8eff"
            },
            pourcentageCSS: {
                "color": "#a0a0a0",
                "font-weight": "bold",
                "font-family": "Verdana, Arial, Helvetica, sans-serif",
                "text-transform": "uppercase",
                "font-size": "1rem"
            },
            pourcentageHoverCSS: {
                "font-size": "1.5rem",
                "color": "#1d8eff"
            }
        },
        50
    );
});

Options :

text: [string],
lineColor: <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>,
lineBgColor: <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>,
backgroundColor: <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>,
lineWidth: [number],
lineWidthHover: [number],
bgLineWidth: [number],
bgLineWidthHover: [number],
lineDuration: [duration],
lineDelay: [duration],
diameter: [number],
viewPourcentage: [boolean],
textCSS: {
/*
    Example :
    "color": "#a0a0a0",
    "font-weight": "bold",
    "font-family": "Verdana, Arial, Helvetica, sans-serif",
    "font-size": "1rem"
*/
},
textHoverCSS: {
/*
    Example :
    "font-size": "1.5rem",
    "color": "#1d8eff"
*/
},
pourcentageCSS: {
/*
    Example :
    "color": "#a0a0a0",
    "font-weight": "bold",
    "font-family": "Verdana, Arial, Helvetica, sans-serif",
    "text-transform": "uppercase",
    "font-size": "1rem"
*/
},
pourcentageHoverCSS: {
/*
    Example :
    "font-size": "1.5rem",
    "color": "#1d8eff"
*/
}

Fonctions :

• circleBar().init
• circleBar().getValue
• circleBar().getOpts
• circleBar().setText
• circleBar().setValue
• circleBar().setLineColor
• circleBar().setLineBgColor
• circleBar().setBgColor
• circleBar().setLineWidth
• circleBar().setBgLineWidth
• circleBar().setLineDuration
• circleBar().setLineDelay
• circleBar().setLineWidthHover
• circleBar().setbgLineWidthHover
• circleBar().setLineTransitionHover
• circleBar().viewPourcentage
• circleBar().setTextCSS
• circleBar().setTextHoverCSS
• circleBar().setPourcentageCSS
• circleBar().setPourcentageHoverCSS

circleBar().init

/**
 * Used to create the circle bar
 *
 * @param {string} _elem Class or id of the slider
 * @param {Array} _opts List of options
 * @param {number} _value Value of the circle bar
 */
circleBar.createCircleBar(elem, opts, value);

circleBar().getValue

/**
 * Used to get the value of the circle bar
 */
circleBar.getValue();

circleBar().getOpts

/**
 * Used to get the options of the circle bar
 */
circleBar.getOpts();

circleBar().setText

/**
 * Used to set text
 *
 * @param {string} _text Text to insert
 */
circleBar.setText(text);

circleBar().setValue

/**
 * Used to set a value
 *
 * @param {number} _val Value of the circle bar
 */
circleBar.setValue(value);

circleBar().setLineColor

/**
 * Used to set the color of the line of the circle bar
 * 
 * @param {string} _lineColor <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
 */
circleBar.setLineColor(lineColor);

circleBar().setLineBgColor

/**
 * Used to set the background color of the line of the circle bar
 *
 * @param {string} _lineBgColor <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
 */
circleBar.setLineBgColor(lineBgColor);

circleBar().setBgColor

/**
 * Used to set the background color of the circle bar
 *
 * @param {string} _bgColor <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
 */
circleBar.setBgColor(bgColor);

circleBar().setLineWidth

/**
 * Used to set the line width
 *
 * @param {number} _lineWidth Width of the line
 */
circleBar.setLineWidth(lineWidth);

circleBar().setBgLineWidth

/**
 * Used to set the background line width
 *
 * @param {number} _bgLineWidth Width of the background line
 */
circleBar.setBgLineWidth(bgLineWidth);

circleBar().setLineDuration

/**
 * Used to set the line duration of the circle bar transition
 *
 * @param {string} _lineDuration Duration of the transition
 */
circleBar.setLineDuration(lineDuration);

circleBar().setLineDelay

/**
 * Used to set the line delay of the circle bar transition
 *
 * @param {string} _lineDelay Delay of the transition
 */
circleBar.setLineDelay(lineDelay);

circleBar().setLineWidthHover

/**
 * Used to set the line hover width
 *
 * @param {number} _lineWidthHover Width of the line hover
 */
circleBar.setLineWidthHover(lineWidthHover);

circleBar().setbgLineWidthHover

/**
 * Used to set the background line hover width
 *
 * @param {number} _bgLineWidthHover Width of the background line hover
 */
circleBar.setbgLineWidthHover(bgLineWidthHover);

circleBar().setLineTransitionHover

/**
 * Used to set the line transition hover of the circle bar transition
 *
 * @param {string} _lineTransitionHover Duration of the transition
 */
circleBar.setLineTransitionHover(lineTransitionHover);

circleBar().viewPourcentage

/**
 * Used to view the pourcentage of the circle bar
 *
 * @param {boolean} _bool True for view pourcentage if not false
 */
circleBar.viewPourcentage(bool);

circleBar().setTextCSS

/**
 * Used to set the CSS of the text
 *
 * @param {Array} _css Array of CSS
 */
circleBar.setTextCSS(css);

circleBar().setTextHoverCSS

/**
 * Used to set the hover CSS of the text
 *
 * @param {Array} _css Array of CSS
 */
circleBar.setTextHoverCSS(css);

circleBar().setPourcentageCSS

/**
 * Used to set the CSS of the pourcentage
 *
 * @param {Array} _css Array of CSS
 */
circleBar.setPourcentageCSS(css);

circleBar().setPourcentageHoverCSS

/**
 * Used to set the hover CSS of the pourcentage
 *
 * @param {Array} _css Array of CSS
 */
circleBar.setPourcentageHoverCSS(css);