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

时间：2022-05-22 03:58:42

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

相关文章