首页 » jQuery » css环形进度条

css环形进度条

原文 http://blog.csdn.net/qq_36336781/article/details/79256871

2018-02-06 02:00:05阅读(416)

css环形进度

下边是

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>

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

.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>

效果图:
css环形进度条
再以同样的方法将右边实现。

下面是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>

最新发布

CentOS专题

关于本站

5ibc.net旗下博客站精品博文小部分原创、大部分从互联网收集整理。尊重作者版权、传播精品博文,让更多编程爱好者知晓!

小提示

按 Ctrl+D 键,
把本文加入收藏夹