radialindicator是一款圆形进度指示器jquery插件-BFW插件库

radialindicator是一款圆形进度指示器jquery插件

使用方式：

第一步引入bfwone 加载依赖项jquery

第二步use插件及css和主题css

use(["radialIndicator", "radialindicator"], function(){});

第三步配置参数

$('#indicatorContainer').radialIndicator({
        barColor: '#87CEEB',//外侧颜色
        barWidth: 10,//外侧宽度
        initValue: 40,//初始值
        roundCorner : true,//边缘圆角化
        percentage: true//是否显示百分比
    });

完整的多样例示例代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["radialIndicator", "radialindicator"], function() {
                $('#indicatorContainer6').radialIndicator({
                    barColor: {
                        0: '#FF0000',
                        33: '#FFFF00',
                        66: '#0066FF',
                        100: '#33CC33'
                    },
                    percentage: true
                });
                $('#indicatorContainer4').radialIndicator({
                    radius: 70,
                    minValue: 10000,
                    maxValue: 10000000,
                    format: '$ ##,##,###'
                });

                $('#indicatorContainer5').radialIndicator({
                    minValue: 1000,
                    maxValue: 100000
                });
                $('#indicatorContainer').radialIndicator({
                    barColor: '#0066FF',
                    barWidth: 10,
                    initValue: 0,
                    roundCorner: true,
                    percentage: true
                });
                var radialObj = $('#indicatorContainer').data('radialIndicator');
                radialObj.animate(60);
                $('#indicatorContainer1').radialIndicator({
                    value: 90
                });

                var radialObj2 = radialIndicator('#indicatorContainer2', {
                    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 () {
                    radialObj2.value(new Date().getSeconds() + 1);
                }, 1000);


                //file upload example
                var container = $('#indicatorContainerWrap1'),
                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('文件上传完成');
                        },
                        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;
                        }
                    });

                }
            });
        });
    </script>
    <style>
        #indicatorContainerWrap,#indicatorContainer1 {
            display: inline-block;
            position: relative;
        }
        #prgLogo {
            position: absolute;
            width: 60px;
            height: 60px;
            margin-top: -30px;
            margin-left: -30px;
        }
        #indicatorContainerWrap1 {
            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;
        }
    </style>
</head>
<body>
    <div id="indicatorContainer6">

    </div>
    <div id="indicatorContainer5">

    </div>
    <div id="indicatorContainer4">

    </div>
    <div id="indicatorContainer">

    </div>
    <div id="indicatorContainer2">

    </div>

    <div id="indicatorContainerWrap">
        <div id="indicatorContainer1"></div>
        <img src="//repo.bfw.wiki/bfwrepo/icon/5d834e50ea520.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_50,h_50,/quality,q_90" id="prgLogo" />

    </div>

    <div id="indicatorContainerWrap1">
        <div class="rad-prg" id="indicatorContainer3"></div>
        <div class="rad-cntnt">
            添加文件或拖放文到此
        </div>
        <input type="file" id="prgFileSelector" />
    </div>
</body>
</html>