实例代码 - 手册网

实例代码“Ctrl+/”提示“F11/ESC”全屏返回格式化恢复运行

<!doctype html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>circlesProgress圆形进度加载百分比</title>
        <link rel="stylesheet" type="text/css" href="/api/jq/circlesProgress/css/normalize.css" />
        <link rel="stylesheet" type="text/css" href="/api/jq/circlesProgress/css/default.css">
        <style type="text/css">
            body {
                font-family: 'Roboto', sans-serif;
            }
            div {
                margin:5px;
            }
            .left {
                float:left;
            }
            .clear {
                clear:both;
            }
            .image-bg {
                background-image:linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
                display:inline-block;
                border-radius:100px;
            }
            .cpb-text {
                color:gray;
                font-size:25px;
            }
            .cpb-text-2 {
                color:red;
                font-size:20px;
                top:-35px !important;
            }
            .cpb-text-3 {
                font-size:80px;
                color:red;
            }
        </style>
        
    </head>
    <body>
        <div class="sucaihuo-container">
            <div class="sucaihuo-content">
                <h2>默认</h2>
                <div class="left" id="basic0"></div>
                <div class="left" id="basic1"></div>
                <div class="left" id="basic2"></div>
                <div class="left" id="basic3"></div>
                <div class="left" id="basic4"></div>
                <div class="left" id="basic5"></div>
                <div class="left" id="basic6"></div>
                <div class="left" id="basic7"></div>
                <div class="left" id="basic8"></div>
                <div class="left" id="basic9"></div>
                <div class="left" id="basic10"></div>
                <div class="clear"></div>

<h3>带文字（自定义css类）</h3>
                <div class="left" id="basic0t"></div>
                <div class="left" id="basic1t"></div>
                <div class="left" id="basic2t"></div>
                <div class="left" id="basic3t"></div>
                <div class="left" id="basic4t"></div>
                <div class="left" id="basic5t"></div>
                <div class="left" id="basic6t"></div>
                <div class="left" id="basic7t"></div>
                <div class="left" id="basic8t"></div>
                <div class="clear"></div>
                <h3>带%符号（自定义css）</h3>
                <div class="left" id="basic9t"></div>
                <div class="left" id="basic10t"></div>
                <div class="clear"></div>

<h2>没有动画</h2>
                <div class="left" id="test4"></div>
                <div class="left" id="test4a"></div>
                <div class="left" id="test4b"></div>
                <div class="left" id="test4c"></div>
                <div class="left" id="test4d"></div>
                <div class="clear"></div>
            </div>
        </div>
        <script>window.jQuery || document.write('<script src="/api/jq/circlesProgress/js/jquery-2.1.1.min.js"><\/script>')</script>
        <script type="text/javascript" src="/api/jq/circlesProgress/dist/jquery.circles-progressbar.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                //Basic
                $('#basic0').circlesProgress({'progress': '1', 'borderSize': '0'});
                $('#basic1').circlesProgress({'progress': '10', 'borderSize': '0'});
                $('#basic2').circlesProgress({'progress': '20', 'borderSize': '0'});
                $('#basic3').circlesProgress({'progress': '30', 'borderSize': '0'});
                $('#basic4').circlesProgress({'progress': '40', 'borderSize': '0'});
                $('#basic5').circlesProgress({'progress': '50', 'borderSize': '0'});
                $('#basic6').circlesProgress({'progress': '60', 'borderSize': '0'});
                $('#basic7').circlesProgress({'progress': '70', 'borderSize': '0'});
                $('#basic8').circlesProgress({'progress': '80', 'borderSize': '0'});
                $('#basic9').circlesProgress({'progress': '90', 'borderSize': '0'});
                $('#basic10').circlesProgress({'progress': '100', 'borderSize': '0'});

//Basic with text
                $('#basic0t').circlesProgress({'progress': '0', 'borderSize': '0', 'enableTextIndicator': true});
                $('#basic1t').circlesProgress({'progress': '10', 'borderSize': '0', 'enableTextIndicator': true});
                $('#basic2t').circlesProgress({'progress': '20', 'borderSize': '0', 'enableTextIndicator': true});
                $('#basic3t').circlesProgress({'progress': '30', 'borderSize': '0', 'enableTextIndicator': true});
                $('#basic4t').circlesProgress({'progress': '40', 'borderSize': '0', 'enableTextIndicator': true});
                $('#basic5t').circlesProgress({'progress': '50', 'borderSize': '0', 'enableTextIndicator': true});
                $('#basic6t').circlesProgress({'progress': '60', 'borderSize': '0', 'enableTextIndicator': true});
                $('#basic7t').circlesProgress({'progress': '70', 'borderSize': '0', 'enableTextIndicator': true});
                $('#basic8t').circlesProgress({'progress': '80', 'borderSize': '0', 'enableTextIndicator': true});

//Basic with percent
                $('#basic9t').circlesProgress({'progress': '90', 'borderSize': '0', 'enableTextIndicator': true, 'textElementClass': 'cpb-text-2', diplayPercentSign: true});
                $('#basic10t').circlesProgress({'progress': '100', 'borderSize': '0', 'enableTextIndicator': true, 'textElementClass': 'cpb-text-2', diplayPercentSign: true});

$('#test1').circlesProgress({'size': '100', 'progress': '10', 'borderSize': '0', 'innerColor': 'rgb(255,0,0)', 'initialProgress': '80'});
                $('#test1a').circlesProgress({'size': '100', 'progress': '20', 'borderSize': '0', 'innerColor': 'rgb(255,100,0)'});
                $('#test1b').circlesProgress({'size': '100', 'progress': '40', 'borderSize': '0', 'innerColor': 'rgb(255,0,200)'});
                $('#test1c').circlesProgress({'size': '100', 'progress': '80', 'borderSize': '0', 'innerColor': 'rgb(0,100,255)'});

$('#test3').circlesProgress({'size': '200', 'progress': '50', 'innerOpacity': 1, 'outerOpacity': 0.2});
                $('#test3a').circlesProgress({'size': '200', 'progress': '75', 'innerOpacity': 0.2, 'outerOpacity': 0.2});
                $('#test3b').circlesProgress({'size': '200', 'progress': '25', 'innerOpacity': 0, 'outerOpacity': 0.5});
                $('#test3c').circlesProgress({'size': '200', 'progress': '5', 'innerOpacity': 1, 'outerOpacity': 0});
                $('#test3d').circlesProgress({'size': '200', 'progress': '66', 'innerOpacity': 0.1, 'outerOpacity': 0.1});

c2c.update({'progress': Math.random() * 100});
                    c2d.update({'progress': Math.random() * 100});
                    c2e.update({'progress': Math.random() * 100, 'borderSize': Math.random() * 40});

c4.update({'progress': Math.random() * 100});
                    c4a.update({'progress': Math.random() * 100});
                    c4b.update({'progress': Math.random() * 100});
                    c4c.update({'progress': Math.random() * 100});
                    c4d.update({'progress': Math.random() * 100});
                }, 3000);
            });
        </script>
    </body>
</html>

​x
 
<!doctype html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>circlesProgress圆形进度加载百分比</title>
        <link rel="stylesheet" type="text/css" href="/api/jq/circlesProgress/css/normalize.css" />
        <link rel="stylesheet" type="text/css" href="/api/jq/circlesProgress/css/default.css">
        <style type="text/css">
            body {
                font-family: 'Roboto', sans-serif;
            }
            div {
                margin:5px;
            }
            .left {
                float:left;
            }
            .clear {
                clear:both;
            }