Radial Bars With jQuery And SVG | ratePoint

radial-bars-ratepoint

ratePoint is a jQuery which is affiliate file that creates a radial rate bar using attributes along with SVG tags. The rating bar also responds to updates and uses undo or rollback to move the current rate to the newly updated rate.

circular loader with percentage, dynamic circular progress bar with jquery and css3, multi color progress bar jquery, jquery animated radial progress bar, multiple circle progress bar

How to make use of it:

1. Insert the jQuery library and the ratePoint.js plugin into the doc.

<link rel="stylesheet" href="/path/to/css/radial-themes.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/js/ratePoint.js"></script>

2. Initialize the plugin.

autoRatePoint();

3. Create an SVG factor for the radial bar and config the plugin by way of the next information.

<svg id="animated" class='' data-toggle="class" viewbox="0 0 100 100 " xmlns="http://www.w3.org/2000/svg ">
  <circle class='no-fil' cx="50 " cy="50 " r="45 "/>
  <item data-func="prodata" 
        data-start="0 " 
        data-end="75 " 
        data-mark="100 " 
        data-unit='%' 
        data-time="7000 " 
        data-label="<span class='grid-center font8 font-all'>AutoMeter</span>" 
        data-angle="0" 
        data-mirror="x" 
        data-bkpoints="0 20 50 70 100"  
        data-bkclass="low normal medium high complete" 
        data-run="auto">
      </item>
  <path id="1" class="bar6 cap-round" data-func="progressbar" stroke-linecap="round" stroke-dasharray="0,251.36264038085938" stroke-width="1" d="M50 10 a 30 30 0 0 1 0 80 a 30 30 0 0 1 0 -80">
  </path>
  <foreignObject data-func="protext" x="20" y="20" height="60%" width="60%" text-anchor="middle" dy="7" class="text-center"></foreignObject>
</svg>

4. This example shows how to automatically update the radial bar.

let datas = [10, 50, 30, 70, 45, 10];
    i = 0;
    instance = 0;
    elem = "#1"
    setInterval(function() {
        let path = $(elem).find("path"),
            prodata = $(elem).find("[data-func='prodata']");
        //dataStart = (dataStart / dataMark) * 100;
        dataStart = path.attr('data-point') ? $(elem).find("path").attr('data-point') : 0;
        dataMark = prodata.attr('data-mark');
        dataStop = datas[i];
        prodata.attr({
            "data-start": dataStart,
            "data-end": dataStop
        });
        console.log(dataStart)
        setTimeout(function() {
            autoRatePoint("#1")
        }, 200);
        if (i == datas.length) {
            i = 0;
            instance = 0;
        }
        i++;
        instance = 1;
}, 10000)

Multi-purpose Radial Bars With jQuery And SVG, ratePoint Plugin/Github, jquery animated progress bar with percentage, jquery circular progress bar with percentage, responsive circle progress bar


See Demo And Download

Official Website(teymzz): Click Here

This superior jQuery/javascript plugin is developed by teymzz. For extra Advanced Usage, please go to the official website.

Share