jQuery轻量级圆形进度指示器插件 A simple and light weight circular indicator plugin

radialIndicator

radialIndicator is a simple and light weight circular indicator plugin. It supports color range, interpolation, formatting, percentage value and much more, and is easy to configure and update after initialization. And it do work well with jQuery and angular js .

How to use?

Include jquery [optional] and radialIndicator.js.
    <script src="radialIndicator.js"></script>
A simple initialization.
        $('#indicatorContainer').radialIndicator();
    

In this first argument is configuration parameters [Optional], Lets see a example with configuration.

        $('#indicatorContainer').radialIndicator({
                barColor: '#87CEEB',
                barWidth: 10,
                initValue: 40,
                roundCorner : true,
                percentage: true
            });
    
Getting instance of radial Progress
        var radialObj = $('#indicatorContainer').data('radialIndicator');
        //now you can use instance to call different method on the radial progress.
        //like
        radialObj.animate(60);
    

What if you don't use jQuery

Radial Progress work standalone too.
        //Intialiazation 
        var radialObj = radialIndicator('#indicatorContainer', {
            barColor : '#87CEEB',
            barWidth : 10,
            initValue : 40
        }); 

        //Using Instance
        radialObj.animate(60); 
    

In this way first argument is a selector string or dom node or node list (Even you pass a node list it takes the first node only). Function returns a instance so you can use it call different methods same as shown in jquery example.
You can use any one of the following way as per your convinient.

A radialIndicator without number idicator

        $('#indicatorContainer').radialIndicator({
            displayNumber: false
        });

    

Providing a color range

You can provide a color range for different points, and if interpolate option is true radialIndicator will interpolate color between two points else it will take the upper limit color of the points.

        $('#indicatorContainer').radialIndicator({
            barColor: {
                0: '#FF0000',
                33: '#FFFF00',
                66: '#0066FF',
                100: '#33CC33'
            },
            percentage: true
        });

    

Providing minimum value and maximum value

You can provide a minimum and maximum value to display the indicator as per required .

        $('#indicatorContainer').radialIndicator({
            minValue: 1000,
            maxValue: 100000
        });
    

Formating a indicator

You can provide a # formatter or a formatter function to format indicator.

        $('#indicatorContainer').radialIndicator({
            radius: 70,
            minValue: 10000,
            maxValue: 10000000,
            format: '$ ##,##,###'
        });

    

Having logo / different element inside the radial inside radialIndicator

This we can easily achieve with normal html css. Here is an example

HTML

        <div id="indicatorContainerWrap">
            <div id="indicatorContainer"></div>
            <img src="picture/lab_exp.png"  id="prgLogo"/>
        </div>
    

CSS

        #indicatorContainerWrap,#indicatorContainer{
            display:inline-block;
            position:relative;
        }
        #prgLogo{
            position:absolute;
            width:60px;
            height:60px;
            margin-top:-30px;
            margin-left:-30px;
        }
    

JS

        $('#indicatorContainer').radialIndicator({value : 90});
    

A clock example

A simple clock using radial indicator.

                var radialObj = radialIndicator('#indicatorContainer', {
                    radius: 60,
                    barWidth: 5,
                    barColor: '#FF0000',
                    minValue: 0,
                    maxValue: 60,
                    fontWeight: 'normal',
                    roundCorner: true,
                    format: function (value) {
                        var date = new Date();
                        return date.getHours() + ':' + date.getMinutes();
                    }
                });

                setInterval(function () {
                    radialObj.value(new Date().getSeconds() + 1);
                }, 1000);


    

A file upload example

Click / Drop file to select.

HTML

                <div id="indicatorContainerWrap">
                    <div class="rad-prg" id="indicatorContainer"></div>
                    <div class="rad-cntnt">Click / Drop file to select.</div>
                    <input type="file" id="prgFileSelector" />
                </div>                
            

CSS

                    #indicatorContainerWrap{
                        position: relative;
                        display: inline-block;
                    }

                    .rad-cntnt{
                        position: absolute;
                        display: table;
                        vertical-align: middle;
                        text-align: center;
                        width: 100%;
                        top:50%;
                        -webkit-transform: translateY(-50%);
                        -moz-transform: translateY(-50%);
                        -ms-transform: translateY(-50%);
                        -o-transform: translateY(-50%);
                        transform: translateY(-50%);
                        font-size:20px;
                        line-height: 24px;
                    }


                    #prgFileSelector{
                        position: absolute;
                        width: 100%;
                        height: 100%;
                        opacity: 0;
                        top:0;
                        left:0;
                        z-index: 10;
                    }
              

JS

                //file upload example
                var container = $('#indicatorContainerWrap'),
                    msgHolder = container.find('.rad-cntnt'),
                    containerProg = container.radialIndicator({
                        radius: 100,
                        percentage: true,
                        displayNumber: false
                    }).data('radialIndicator');


                container.on({
                    'dragenter': function (e) {
                        msgHolder.html("Drop here");
                    },
                    'dragleave': function (e) {
                        msgHolder.html("Click / Drop file to select.");
                    },
                    'drop': function (e) {
                        e.preventDefault();
                        handleFileUpload(e.originalEvent.dataTransfer.files);
                    }
                });

                $('#prgFileSelector').on('change', function () {
                    handleFileUpload(this.files);
                });

                function handleFileUpload(files) {
                    msgHolder.hide();
                    containerProg.option('displayNumber', true);

                    var file = files[0],
                        fd = new FormData();

                    fd.append('file', file);


                    $.ajax({
                        url: 'service/upload.php',
                        type: 'POST',
                        data: fd,
                        processData: false,
                        contentType: false,
                        success: function () {
                            containerProg.option('displayNumber', false);
                            msgHolder.show().html('File upload done.');
                        },
                        xhr: function () {
                            var xhr = new window.XMLHttpRequest();
                            //Upload progress
                            xhr.upload.addEventListener("progress", function (e) {
                                if (e.lengthComputable) {
                                    var percentComplete = (e.loaded || e.position) * 100 / e.total;
                                    //Do something with upload progress
                                    console.log(percentComplete);
                                    containerProg.animate(percentComplete);
                                }
                            }, false);

                            return xhr;
                        }
                    });

                }