css环形进度条

最新推荐文章于 2024-05-13 18:48:47 发布

Artemis视同

最新推荐文章于 2024-05-13 18:48:47 发布

阅读量4.9k

点赞数

分类专栏：前端文章标签： html jQuery 环形进度条

本文链接：https://blog.csdn.net/qq_36336781/article/details/79256871

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

css环形进度条

下边是

进度条效果图

首先我们实现一个环形

<style type="text/css">
  .circle {
    width: 200px;
    height: 200px;  
    position: absolute;
    border-radius: 50%;
    background: #00aacc;
  }
  .mask {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    left: 25px;
    top: 25px;
    background: #FFF;
    position: absolute;
    text-align: center;
    line-height: 150px;
    font-size: 16px;
 }
</style>

<div class="circle">
  <div class="mask"></div>
</div>

效果图：
环形图
我是利用两个圆来实现的环形还可以利用一下方式来实现。

.annular{
    width: 160px;
    height: 160px;
    border:20px solid #00aacc;
    border-radius: 50%;
}

<div class="annular">
</div>

接下来实现不完整环形

 .circle {
    width: 200px;
    height: 200px;  
    position: absolute;
    border-radius: 50%;
    background: #00aacc;
}
.circle_left
{
    width: 200px; 
    height: 200px;
    position: absolute;
    top: 0;left: 0;
}
.left

 {
    display: block;
    width:200px; 
    height:200px;
    background:#aaa;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    transform: rotate(0deg);
}
.circle_left, .left {
    clip:rect(0,100px,auto,0);
}
.mask {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    left: 25px;
    top: 25px;
    background: #FFF;
    position: absolute;
    text-align: center;
    line-height: 150px;
    font-size: 16px;
}

<div class="circle">
    <div class="circle_left">
        <div class="left"></div>
    </div>
    <div class="mask"></div>
</div>

效果图：
半环形
再以同样的方法将右边实现。

下面是js实现动态的效果

<script type="text/javascript">
$(function() {
    $('.circle').each(function(index, el) {
        var num = $(this).find('span').text() * 3.6;
        if (num<=180) {
            $(this).find('.right').css('transform', "rotate(" + num + "deg)");
        } else {
            $(this).find('.right').css('transform', "rotate(180deg)");
            $(this).find('.left').css('transform', "rotate(" + (num - 180) + "deg)");
        };
    });
});
</script>

最后给大家看下完整代码：

<!DOCTYPE html>
<html>
<head>
  <script src="js/jquery.min.js"></script>
<style type="text/css">
  .circle {
    width: 200px;
    height: 200px;  
    position: absolute;
    border-radius: 50%;
    background: #00aacc;
}
.circle_left, .circle_right 
{
    width: 200px; 
    height: 200px;
    position: absolute;
    top: 0;left: 0;
}
.left, .right
 {
    display: block;
    width:200px; 
    height:200px;
    background:#aaa;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    transform: rotate(0deg);
}
.circle_right, .right {
    clip:rect(0,auto,auto,100px);
}
.circle_left, .left {
    clip:rect(0,100px,auto,0);
}
.mask {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    left: 25px;
    top: 25px;
    background: #FFF;
    position: absolute;
    text-align: center;
    line-height: 150px;
    font-size: 16px;
}
</style>
</head>
<body>
<div class="circle">
    <div class="circle_left"><div class="left"></div></div>
    <div class="circle_right"><div class="right"></div></div>
    <div class="mask">
      <span>80</span>%
    </div>
</div>
<script type="text/javascript">
$(function() {
    $('.circle').each(function(index, el) {
        var num = $(this).find('span').text() * 3.6;
        if (num<=180) {
            $(this).find('.right').css('transform', "rotate(" + num + "deg)");
        } else {
            $(this).find('.right').css('transform', "rotate(180deg)");
            $(this).find('.left').css('transform', "rotate(" + (num - 180) + "deg)");
        };
    });
});</script>
</body>
</html>

Artemis视同

关注

0
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
css环形进度条

css环形进度条下边是首先我们实现一个环形style type="text/css"> .circle { width: 200px; height: 200px; position: absolute; border-radius: 50%; background: #00aacc; } .mask { wi
复制链接

扫一扫