只为成功找方法，不为失败找理由。

博客园 首页 新随笔 联系 订阅 管理
简单实用的纯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

posted on 2015-09-02 10:35  诗意的活着  阅读(1536)  评论(0)  编辑  收藏  举报