radialIndicator 环形进度条插件

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
        <script src="js/radialIndicator.js"></script>
        <style>
            .prg-cont{
                width: 100%;
                height: 500px;
                text-align: center;
                margin: 0 auto;
                margin-top: 200px;
            }
        </style>
    </head>
    <body>
        <div class="prg-cont" id="indicatorContainer"></div>
        <script>
        var radialObj = $('#indicatorContainer').radialIndicator({
            barColor: {
                0: '#FF0000',
                33: '#FFFF00',
                66: '#0066FF',
                100: '#33CC33'
            },
            percentage: true
        }).data('radialIndicator');
        $(".prg-cont canvas").hover(function(){
            radialObj.animate(100);
        },function(){
            radialObj.animate(0);
        })
        </script>
    </body>
</html>

效果：
鼠标移入：0%-->100%;

123.jpg

鼠标移出：100%-->0%;

最后编辑于：2018.09.26 16:11:17

radialIndicator 环形进度条插件

推荐阅读更多精彩内容