#set( $symbol_pound = '#' )
#set( $symbol_dollar = '$' )
#set( $symbol_escape = '\' )
<style>
    .demo-cp-item {
        display: inline-block;
        text-align: center;
        margin: 8px 25px 0 25px;
        color: ${symbol_pound}666;
    }

    .demo-cp-item > div:nth-child(2) {
        margin-top: 6px;
    }

    /** 自定义样式1 */
    ${symbol_pound}demoProgress9 .circle-progress-value {
        stroke-width: 11px;
        stroke: ${symbol_pound}00CC00;
        stroke-dasharray: 0 23.3;
        stroke-linecap: round;
    }

    ${symbol_pound}demoProgress9 .circle-progress-circle {
        stroke: transparent;
    }

    ${symbol_pound}demoProgress9 .circle-progress-text {
        font-family: "Gotham rounded";
        font-size: 16px;
        fill: ${symbol_pound}00CC00;
    }

    /** 自定义样式2 */
    ${symbol_pound}demoProgress10 .circle-progress-circle {
        stroke-width: 6px;
        stroke: ${symbol_pound}ccc;
        stroke-dasharray: 1 5;
        stroke-dashoffset: 1.6;
    }

    ${symbol_pound}demoProgress10 .circle-progress-value {
        stroke: ${symbol_pound}43A3FB;
    }

    ${symbol_pound}demoProgress10.circle-progress-success .circle-progress-value {
        stroke: ${symbol_pound}5CB85C;
    }

    ${symbol_pound}demoProgress10.circle-progress-success .circle-progress-text {
        fill: ${symbol_pound}5CB85C;
    }

    /** 自定义样式3 */
    ${symbol_pound}demoProgress11 .circle-progress-value {
        stroke-width: 8px;
        stroke: ${symbol_pound}3FDABA;
    }

    ${symbol_pound}demoProgress11 .circle-progress-circle {
        stroke-width: 6px;
        stroke: ${symbol_pound}E0FAF1;
    }

    /** 自定义样式4 */
    ${symbol_pound}demoProgress12 .circle-progress-value {
        stroke-width: 22px;
        stroke: ${symbol_pound}3FDABA;
        stroke-dasharray: 60 2;
        stroke-linecap: butt;
    }

    ${symbol_pound}demoProgress12 .circle-progress-circle {
        stroke: ${symbol_pound}E0FAF1;
        stroke-width: 22px;
        fill: ${symbol_pound}E0FAF1;
    }

    ${symbol_pound}demoProgress12 .circle-progress-text {
        font-family: "Gotham";
        font-size: 16px;
        fill: ${symbol_pound}3FDABA;
    }

    /** 自定义样式5 */
    ${symbol_pound}demoProgress13 > svg {
        width: 40px;
        height: 40px;
    }

    ${symbol_pound}demoProgress13 .circle-progress-value {
        stroke-width: 8px;
    }

    ${symbol_pound}demoProgress13 .circle-progress-circle {
        stroke-width: 8px;
    }

    ${symbol_pound}demoProgress13 .circle-progress-text {
        font-size: 30px;
    }
</style>

<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-header">基本用法</div>
        <div class="layui-card-body">
            <div class="demo-cp-item">
                <div id="demoProgress1"></div>
                <div>默认样式</div>
            </div>
            <div class="demo-cp-item">
                <div id="demoProgress2"></div>
                <div>逆时针方向</div>
            </div>
            <div class="demo-cp-item">
                <div id="demoProgress3"></div>
                <div>自定义起始位置</div>
            </div>
        </div>
    </div>
    <div class="layui-card">
        <div class="layui-card-header">文字样式</div>
        <div class="layui-card-body">
            <div class="demo-cp-item">
                <div id="demoProgress4"></div>
                <div>vertical</div>
            </div>
            <div class="demo-cp-item">
                <div id="demoProgress5"></div>
                <div>percent</div>
            </div>
            <div class="demo-cp-item">
                <div id="demoProgress6"></div>
                <div>value</div>
            </div>
            <div class="demo-cp-item">
                <div id="demoProgress7"></div>
                <div>valueOnCircle</div>
            </div>
            <div class="demo-cp-item">
                <div id="demoProgress8"></div>
                <div>none</div>
            </div>
        </div>
    </div>
    <div class="layui-card">
        <div class="layui-card-header">自定义样式</div>
        <div class="layui-card-body">
            <div class="demo-cp-item">
                <div id="demoProgress9"></div>
            </div>
            <div class="demo-cp-item">
                <div id="demoProgress10"></div>
            </div>
            <div class="demo-cp-item">
                <div style="position: relative;">
                    <div id="demoProgress11"></div>
                    <div style="position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);">
                        <div style="font-size: 22px;color: ${symbol_pound}3DDABB;">60<span style="font-size: 14px;">%</span></div>
                        <div style="color: ${symbol_pound}515a6e;font-size: 14px;">通过率</div>
                    </div>
                </div>
            </div>
            <div class="demo-cp-item">
                <div id="demoProgress12"></div>
            </div>
            <div class="demo-cp-item">
                <div id="demoProgress13"></div>
            </div>
        </div>
    </div>
</div>

<script>
    layui.use(['layer', 'CircleProgress'], function () {
        var ${symbol_dollar} = layui.jquery;
        var layer = layui.layer;
        var CircleProgress = layui.CircleProgress;

        // 快速使用
        new CircleProgress('${symbol_pound}demoProgress1', {
            max: 100,
            value: 20,
        });

        // 逆时针方向
        new CircleProgress('${symbol_pound}demoProgress2', {
            max: 100,
            value: 20,
            clockwise: false
        });

        // 自定义起始位置
        new CircleProgress('${symbol_pound}demoProgress3', {
            max: 100,
            value: 20,
            startAngle: 225
        });

        // 文字垂直
        new CircleProgress('${symbol_pound}demoProgress4', {
            max: 100,
            value: 20,
            textFormat: 'vertical'
        });

        // 文字百分比
        new CircleProgress('${symbol_pound}demoProgress5', {
            max: 100,
            value: 20,
            textFormat: 'percent'
        });

        // 文字只显示值
        new CircleProgress('${symbol_pound}demoProgress6', {
            max: 100,
            value: 20,
            textFormat: 'value'
        });

        // 文字值显示在进度条上
        new CircleProgress('${symbol_pound}demoProgress7', {
            max: 100,
            value: 20,
            textFormat: 'valueOnCircle'
        });

        // 文字不显示
        new CircleProgress('${symbol_pound}demoProgress8', {
            max: 100,
            value: 20,
            textFormat: 'none'
        });

        // 自定义样式1
        new CircleProgress('${symbol_pound}demoProgress9', {
            max: 12,
            value: 9,
            textFormat: function (value, max) {
                return value + ' dots';
            }
        });
        // 自定义样式2
        var ins10 = new CircleProgress('${symbol_pound}demoProgress10', {
            max: 100,
            value: 0,
            textFormat: function (value, max) {
                if (value == max) {
                    return 'OK';
                } else {
                    return value + '%';
                }
            }
        });

        var timer10 = setInterval(function () {
            ins10.value += 1;
            if (ins10.value == ins10.max) {
                ${symbol_dollar}('${symbol_pound}demoProgress10').addClass('circle-progress-success');
                clearInterval(timer10);
            }
        }, 100);

        // 监听页面卸载
        layui.admin.on('destroy(plugin/other/circleProgress)', function () {
            clearInterval(timer10);
        });

        // 自定义样式3
        new CircleProgress('${symbol_pound}demoProgress11', {
            max: 100,
            value: 60,
            textFormat: 'none'
        });
        // 自定义样式4
        new CircleProgress('${symbol_pound}demoProgress12', {
            max: 4,
            value: 3,
            textFormat: 'vertical',
            clockwise: false
        });
        // 自定义样式5
        new CircleProgress('${symbol_pound}demoProgress13', {
            max: 100,
            value: 20,
            textFormat: 'percent'
        });

    });
</script>