{"id":1608,"date":"2016-05-24T09:00:37","date_gmt":"2016-05-24T09:00:37","guid":{"rendered":"http:\/\/www.jquery-az.com\/?p=1608"},"modified":"2023-10-22T09:27:41","modified_gmt":"2023-10-22T09:27:41","slug":"a-jquery-radial-progress-bar-plug-in-with-4-demos","status":"publish","type":"post","link":"https:\/\/www.jquery-az.com\/a-jquery-radial-progress-bar-plug-in-with-4-demos\/","title":{"rendered":"A jQuery Radial Progress plug-in with 4 Demos"},"content":{"rendered":"

The radial progress bar <\/strong><\/h3>\n

The circular or radial progress bar can be used for showing the pie charts, the progress of a task like downloading or saving the data, etc. for your web projects.<\/p>\n

In this tutorial, the radial-progress-bar<\/em> which is based on jQuery is used for showing you demos.<\/p>\n

I will also show how you may set up this plug-in to be used for your project.<\/p>\n

A demo of simple radial progress bar<\/strong><\/h3>\n

In this example, a default progress bar is created which is blue in color and moves by 1% in each step. If you look at the background, it is kept semi-transparent. The percentage text is kept in the center for this circular progress bar which size is 40px. \u00a0See a demo online:<\/p>\n

\"jQuery<\/p>\n

See online demo and code<\/strong><\/a><\/h6>\n

This is really simple to set up for your web page. Just include the plug-in JS files: radial-progress-bar.js and examples.js<\/em>. You also need to include the jQuery library:<\/p>\n

\u00a0<script src=”http:\/\/code.jquery.com\/jquery-1.12.3.min.js”><\/script><\/p>\n

<script src=”js\/radial-progress-bar\/radial-progress-bar.js”><\/script><\/p>\n

<script src=”js\/radial-progress-bar\/examples.js”><\/script><\/p><\/blockquote>\n

You may get these files from the plug-in page here<\/a> by downloading the package.<\/p>\n

The markup is really simple, create a div tag with class = \u201cexample1\u201d<\/em>. The example1\u2019s specification is placed at the examples.js<\/em> file where jQuery code is used for creating the default radial progress bar with the following options:<\/p>\n

jQuery(\"#example1\").radialProgress(\"init\", {\r\n\r\n'size': 100,\r\n\r\n'fill': 5,\r\n\r\n\r\n\r\n}).radialProgress(\"to\", {'perc': 100, 'time': 10000});<\/pre>\n
For increasing the size of the\u00a0circle or changing the color of text, time etc.\u2013 you may modify these options. I will show this in coming examples.<\/p>\n
A demo of creating pie chart progress bar<\/strong><\/h3>\n
Following is a demo of pie chart where values are displayed in the\u00a0center. The color and percentage are set by using the color and perc<\/strong><\/em> parameters of data<\/strong> <\/em>option in jQuery code. The font size is 13px that you may modify as per need and to match the design and available space on your web page.<\/p>\n
\"jQuery<\/p>\n
Following is the code:<\/strong><\/p>\n
<!DOCTYPE html>\r\n<html xmlns=\"https:\/\/www.w3.org\/1999\/xhtml\" xml:lang=\"en\" lang=\"en\">\r\n<head>\r\n \r\n       <link rel=\"stylesheet\" href=\"css\/radial-progress-bar\/examples.css\">\r\n\r\n<\/head>\r\n<body role=\"document\">\r\n\r\n        <section>\r\n          <div id=\"pie \" class=\"example\" style=\"width: 100px;\"><\/div>\r\n          <h2>A demo of pie chart<\/h2>\r\n        <\/section>\r\n\r\n        <script src=\"https:\/\/code.jquery.com\/jquery-1.12.3.min.js\"><\/script>\r\n        <script src=\"js\/radial-progress-bar\/radial-progress-bar.js\"><\/script>\r\n        <script src=\"js\/radial-progress-bar\/examples.js\"><\/script>\r\n\r\n<\/body>\r\n<\/html><\/pre>\n
Pie ID<\/strong> is used in the jQuery code for specifying the options of the pie chart.<\/p>\n
A demo of changing circular progress bar colors<\/strong><\/h3>\n
To change the colors to match the design pattern of your website or as per your liking, you need to change certain properties in the main JS files of the plug-in. I will recommend you to make a copy of the main file and refer to that copy on your web page. Make any changes there, so if you face any problems you may replace the original one.<\/p>\n
In this demo, I will change the default blue color of the progress bar and percentage text along with the remaining circle. The red color is used for the progress bar while light red for the remaining progress. While the text color is also red.<\/p>\n
\"jQuery<\/p>\n
If you compare the code of this and the first example, the only difference is the radial-progress-bar-amend.js<\/em> file which is referenced just above the <\/body> tag. This is the copy of main plug-in file where I changed only two options for changing the color.<\/p>\n
For changing the color of the default bar, find the radialProgress<\/em> function in that JS file. Inside the function, locate the color and background<\/em><\/strong> options. The color will deal with the progress bar and percentage text while the background with the remaining progress.<\/p>\n
Also, these color changes will also apply to the other progress bars like pie-chart or concentric bars.<\/p>\n
A demo of changing the size and fill of the circle<\/strong><\/h3>\n
Similarly, by changing a few options in the examples.js<\/em> file, you may change the size of the\u00a0circle and its filling option. See the demo where I doubled the size of the\u00a0circle and also increased the thickness of the\u00a0line.<\/p>\n
\"jQuery<\/p>\n
Again, the markup is the same as first example except the examples.js<\/em> file is replaced by examples-amend.js<\/em> where the following script is used:<\/p>\n
jQuery(\"#example1\").radialProgress(\"init\", {\r\n\r\n'size': 200,\r\n\r\n'fill': 15,\r\n\r\n\r\n\r\n}).radialProgress(\"to\", {'perc': 100, 'time': 10000});<\/pre>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
The radial progress bar The circular or radial progress bar can be used for showing the pie charts, the progress of a task like downloading or saving the data, etc. for your web projects. In this tutorial, the radial-progress-bar which is based on jQuery is used for showing you demos. I will also show how … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":1612,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[2],"tags":[],"yoast_head":"\nA jQuery Radial Progress plug-in with 4 Demos<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.jquery-az.com\/a-jquery-radial-progress-bar-plug-in-with-4-demos\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"A jQuery Radial Progress plug-in with 4 Demos\" \/>\n<meta property=\"og:description\" content=\"The radial progress bar The circular or radial progress bar can be used for showing the pie charts, the progress of a task like downloading or saving the data, etc. for your web projects. In this tutorial, the radial-progress-bar which is based on jQuery is used for showing you demos. I will also show how ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jquery-az.com\/a-jquery-radial-progress-bar-plug-in-with-4-demos\/\" \/>\n<meta property=\"article:published_time\" content=\"2016-05-24T09:00:37+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-10-22T09:27:41+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/05\/53.0_4-jQuery-radial-progress-bar-size.png\" \/>\n\t<meta property=\"og:image:width\" content=\"494\" \/>\n\t<meta property=\"og:image:height\" content=\"232\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"jqueryaz\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"jqueryaz\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jquery-az.com\/a-jquery-radial-progress-bar-plug-in-with-4-demos\/\",\"url\":\"https:\/\/www.jquery-az.com\/a-jquery-radial-progress-bar-plug-in-with-4-demos\/\",\"name\":\"A jQuery Radial Progress plug-in with 4 Demos\",\"isPartOf\":{\"@id\":\"https:\/\/www.jquery-az.com\/#website\"},\"datePublished\":\"2016-05-24T09:00:37+00:00\",\"dateModified\":\"2023-10-22T09:27:41+00:00\",\"author\":{\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.jquery-az.com\/a-jquery-radial-progress-bar-plug-in-with-4-demos\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jquery-az.com\/a-jquery-radial-progress-bar-plug-in-with-4-demos\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jquery-az.com\/a-jquery-radial-progress-bar-plug-in-with-4-demos\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.jquery-az.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"A jQuery Radial Progress plug-in with 4 Demos\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jquery-az.com\/#website\",\"url\":\"https:\/\/www.jquery-az.com\/\",\"name\":\"\",\"description\":\"PHP, Bootstrap, jQuery, CSS, Python, Java and others\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jquery-az.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3\",\"name\":\"jqueryaz\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g\",\"caption\":\"jqueryaz\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"A jQuery Radial Progress plug-in with 4 Demos","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.jquery-az.com\/a-jquery-radial-progress-bar-plug-in-with-4-demos\/","og_locale":"en_US","og_type":"article","og_title":"A jQuery Radial Progress plug-in with 4 Demos","og_description":"The radial progress bar The circular or radial progress bar can be used for showing the pie charts, the progress of a task like downloading or saving the data, etc. for your web projects. In this tutorial, the radial-progress-bar which is based on jQuery is used for showing you demos. I will also show how ... Read more","og_url":"https:\/\/www.jquery-az.com\/a-jquery-radial-progress-bar-plug-in-with-4-demos\/","article_published_time":"2016-05-24T09:00:37+00:00","article_modified_time":"2023-10-22T09:27:41+00:00","og_image":[{"width":494,"height":232,"url":"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/05\/53.0_4-jQuery-radial-progress-bar-size.png","type":"image\/png"}],"author":"jqueryaz","twitter_misc":{"Written by":"jqueryaz","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jquery-az.com\/a-jquery-radial-progress-bar-plug-in-with-4-demos\/","url":"https:\/\/www.jquery-az.com\/a-jquery-radial-progress-bar-plug-in-with-4-demos\/","name":"A jQuery Radial Progress plug-in with 4 Demos","isPartOf":{"@id":"https:\/\/www.jquery-az.com\/#website"},"datePublished":"2016-05-24T09:00:37+00:00","dateModified":"2023-10-22T09:27:41+00:00","author":{"@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3"},"breadcrumb":{"@id":"https:\/\/www.jquery-az.com\/a-jquery-radial-progress-bar-plug-in-with-4-demos\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jquery-az.com\/a-jquery-radial-progress-bar-plug-in-with-4-demos\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.jquery-az.com\/a-jquery-radial-progress-bar-plug-in-with-4-demos\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.jquery-az.com\/"},{"@type":"ListItem","position":2,"name":"A jQuery Radial Progress plug-in with 4 Demos"}]},{"@type":"WebSite","@id":"https:\/\/www.jquery-az.com\/#website","url":"https:\/\/www.jquery-az.com\/","name":"","description":"PHP, Bootstrap, jQuery, CSS, Python, Java and others","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jquery-az.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3","name":"jqueryaz","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g","caption":"jqueryaz"}}]}},"_links":{"self":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/1608"}],"collection":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/comments?post=1608"}],"version-history":[{"count":6,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/1608\/revisions"}],"predecessor-version":[{"id":10892,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/1608\/revisions\/10892"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/media\/1612"}],"wp:attachment":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/media?parent=1608"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/categories?post=1608"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/tags?post=1608"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}