简单实用的纯CSS百分比圆形进度条插件

percircle是一款简单实用的纯CSS百分比圆形进度条插件。你不需要做任何设置，只需要按该圆形进度条插件提供的标准HTML结构来编写代码，就可以生成一个漂亮的百分比圆形进度条。

首先要做的就是引入：使用该幻灯片插件需要在页面中引入jQuery和percircle.css以及percircle.js文件。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" href="css/percircle.css" />
        <script src="js/jquery-2.1.1.min.js"></script>
        <script src="js/percircle.js"></script>   
    </head>
    <body>
        <div id="bluecircle" class="c100 p90 big">
            <span>90%</span>
            <div class="slice">
                <div class="bar"></div>
                <div class="fill"></div>
            </div>
        </div>   
        <div id="orangecircle" class="c100 p100 orange">
    <span>100%</span>
    <div class="slice">
        <div class="bar"></div>
        <div class="fill"></div>
    </div>
    </div>      
    </body>
</html>

其中百分比是根据p90 这个修改的，只需要需改p90就可以跟着修改样式让图形百分比进行变化

另外有：基于SVG的扁平风格圆形进度条插件地址http://www.htmleaf.com/html5/SVG/201508172426.html

简单实用的纯CSS百分比圆形进度条插件

相关推荐