Question

这是我的代码，我正在尝试使用Circliful用百分比制作半圆，我在这个半圆中没有渐变我在这个半身像中放置了progressColor属性，它只是从头到尾显示，我试图用渐变的最终颜色实现此半圆。

    <h3>Circliful</h3>

    <div class="row">
        <div class="col-lg-2">
            <div id="semi-circle"></div>
        </div>
    </div>

</section>

<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">< 
/script>
<script 
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"> 
</script>
<script src="js/jquery.circliful.js"></script>
<script>
    $( document ).ready(function() { // 6,32 5,38 2,34
        $("#semi-circle").circliful({
            animation: 1,
            animationStep: 5,
            foregroundBorderWidth: 15,
            backgroundBorderWidth: 15,
            percent: 95,
            textSize: 28,
            textStyle: 'font-size: 12px;',
            textColor: '#666',
            halfCircle: 1,
            progressColor: {40: '#1dc080', 60: '#00b6c4', 60: '#00b6c4'}
        });
    });
</script>

Answer 1

尝试此链接：

https://github.com/pguso/jquery-plugin-circliful/issues/149

可能的原因：

插件未更新
未实现渐变

api文件说progressColor仅随着百分比的变化而改变前景圆的颜色，因此不应用渐变。

如何在圆半圆中设置渐变

1 个答案: