Query轻量级圆形进度指示器插件效果演示

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

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

 
1
2
3
4
5
6
7
$('#indicatorContainer').radialIndicator({
        barColor: '#87CEEB',
        barWidth: 10,
        initValue: 40,
        roundCorner : true,
        percentage: true
    });
Getting instance of radial Progress
1
2
3
4
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.
1
2
3
4
5
6
7
8
9
//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

 
1
2
3
$('#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.

 
1
2
3
4
5
6
7
8
9
$('#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 .

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

Formating a indicator

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

 
1
2
3
4
5
6
$('#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

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

CSS

1
2
3
4
5
6
7
8
9
10
11
#indicatorContainerWrap,#indicatorContainer{
    display:inline-block;
    position:relative;
}
#prgLogo{
    position:absolute;
    width:60px;
    height:60px;
    margin-top:-30px;
    margin-left:-30px;
}

JS

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

A clock example

A simple clock using radial indicator.

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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

1
2
3
4
5
<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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
#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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
//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;
        }
    });
 
}

http://www.htmleaf.com/Demo/201502171390.html

posted @ 2017-06-30 17:54  florence1995  阅读(273)  评论(0)    收藏  举报