Skip to content
A simple JQuery Plugin to create Circle Canvas with percentage.
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
css CSS Minified and updated the distributions Nov 13, 2018
dist Fixed Code Style Nov 21, 2018
src Fixed Code Style Nov 21, 2018
.gitignore Added animations Nov 13, 2018
CHANGELOG.md Gradients as foreground. Nov 19, 2018
LICENSE First Commit Nov 12, 2018
README.md Update README.md Nov 19, 2018

README.md

JCirclize

Description

Percentage Circles Plugin for jQuery

Installation

Download the repository.

Usage

Load The Plugin

Use <script src="dist/jquery.jCirclize.js"></script> to load the jQuery version of the plugin. REMEMBER: You have to load jQuery to use this version.

or use <script src="dist/vanilla.jCirclize.js"></script> to load the vanilla version of the plugin.

And use <link href="css/jCirclize.css" rel="stylesheet" type="text/css"> to load the style inside your HTML page.

WARNING You have to load one version of the plugin and the css file to use this plugin.

Basic Usage

You can just call the function without any options.

// JQuery Version

$(document).ready(function() {
    $('#object').circlize();
});

// JavaScript Version

var element = document.getElementById("yourElement");
circlize(element, {});

Calling the function you set the element to the default parameters, it creates something like this:

Preview

Default options

You can customize the percentage circle using some options of jCirclize. These are the defaults.

// JQuery Version

$(document).ready(function() {
    $('#object').circlize({
		radius: 100, // The radius of the circle
		percentage: 50, // The percentage covered by the foreground
		usePercentage: true, // If you turn it to false it will use min and max
		useAnimations: true, // If you turn it to false it will not use the animations
		useGradient: true, // If you turn it to false it will use the solid color of the foreground
		background: "rgba(20,20,20,0.5)",
		foreground: "#1a1a1a",
		stroke: 20, // The width of the stroke
		duration: 1000, // The duration of the animation in milliseconds
		min: 100, // The minimum value
		max: 100, // The maximum value
		gradientColors: ["#f0f0f0", "red", "#f0f0f0"] // [Max 3 colors] Here you can set the colors of the gradients
	});
});

// JavaScript Version

var element = document.getElementById("yourElement");
circlize(element, {
	radius: 100, // The radius of the circle
	percentage: 50, // The percentage covered by the foreground
	usePercentage: true, // If you turn it to false it will use min and max
	useAnimations: true,// If you turn it to false it will not use the animations
	useGradient: true, // If you turn it to false it will use the solid color of the foreground
	background: "rgba(20,20,20,0.5)",
	foreground: "#1a1a1a",
	stroke: 20, // The width of the stroke
	duration: 1000, // The duration of the animation in milliseconds
	min: 100, // The minimum value
	max: 100, // The maximum value
	gradientColors: ["#f0f0f0", "red", "#f0f0f0"] // [Max 3 colors] Here you can set the colors of the gradients
});

This is my first plugin for JQuery, I hope you like it.

You can’t perform that action at this time.