css3如何实现圆形进度条？css3中圆形进度条的实现

进度条我们是经常可以看见的，但是进度条怎么来实现呢？我们上一篇文章（css3如何实现进度条？css3中进度条的实现方法介绍）中已经简单的说过了css3实现长形进度条的方法，今天的这篇文章就给大家来介绍一下css3圆形进度条的实现方法，有感兴趣的小伙伴可以看一看。

我们都知道做出一个静态的圆环形是很简单的，像下面这样就可以了

css3圆形效果如下：

但是圆形的进度条是一个动态的效果，所以就需要考虑很多了，首先我们来看一下css圆形进度条的实现思路：

我们可以把整个圆环分成左右两部分；左右两个半圆都旋转，比如先让右边半圆旋转再接上左边半圆然后左边半圆旋转，这样就可以实现了整个圆环的旋转，就是一个圆形进度条了。

立即学习“前端免费学习笔记（深入）”；

下面我们就来看看css3圆形进度条具体的实现方法。

首先我们来看css3右边半圆的实现

.right{
    position: relative;
    width: 100px;
    height: 200px;
    overflow: hidden;
}
.rightcircle{
    width: 160px;
    height: 160px;
    border:20px solid transparent;
    border-radius: 50%;
    position: absolute;
    top:0;
    right: 0;
    border-top:20px solid lightblue;
    border-right:20px solid lightblue;
    -webkit-transform : rotate(45deg);
    -moz-transform : rotate(45deg);
    -o-transform : rotate(45deg);
    transform : rotate(45deg); /* 旋转45度 */
}
/* 这里仅考虑webkit内核的情况，您可以写完整了 */
.rightcircle{
    -webkit-animation-name: circle_right; /* 动画名称 */
    -webkit-animation-duration: 5s;  /* 完成一个动画需要的时间 */
    -webkit-animation-timing-function: linear; /* 动画播放的方式，linear是匀速变化 */
    -webkit-animation-iteration-count: infinite;  /* 动画播放的次数，infinite是无限次数 */
}
@-webkit-keyframes circle_right{
    0%{
        transform : rotate(-135deg);
    }
    100%{
        transform : rotate(45deg);
    }
}

css3右边半圆的实现效果如下：

ReportPlus数据报表中心小程序

ReportPlust意在打造一套精美的数据报表模板，里面高度封装日历组件、表格组件、排行榜组件、条形进度条组件、文本块组件以及ucharts的多个图表组件，用户只需要按照虚拟数据的格式，传特定数据即可方便、快捷地打造出属于自己的报表页面。该小程序主要使用了ucharts和wyb-table两插件实现的数据报表功能。 特点使用的是uni-app中最受欢迎的图表uCharts插件完成图表展示，该插件

下载

css3左半圆实现和右半圆正好相反，代码如下：

.right{
    position: relative;
    width: 100px;
    height: 200px;
    overflow: hidden;
}
.rightcircle{
    width: 160px;
    height: 160px;
    border:20px solid transparent;
    border-radius: 50%;
    position: absolute;
    bottom:0;
    left: 0;
    border-bottom:20px solid lightblue;
    border-left:20px solid lightblue;
    -webkit-transform : rotate(45deg);
    -moz-transform : rotate(45deg);
    -o-transform : rotate(45deg);
    transform : rotate(45deg); /* 旋转45度 */
}
/* 这里仅考虑webkit内核的情况，您可以写完整了 */
.rightcircle{
    -webkit-animation-name: circle_right; /* 动画名称 */
    -webkit-animation-duration: 5s;  /* 完成一个动画需要的时间 */
    -webkit-animation-timing-function: linear; /* 动画播放的方式，linear是匀速变化 */
    -webkit-animation-iteration-count: infinite;  /* 动画播放的次数，infinite是无限次数 */
}
@-webkit-keyframes circle_right{
    0%{
        transform : rotate(-135deg);
    }
    100%{
        transform : rotate(45deg);
    }
}

css3左半圆效果如下：

两个半圆都实现出来了，接下来只需要将两个半圆拼接在一起就可以实现css3圆形进度条的效果了

css3实现圆形进度条代码如下：

 .circle_process{
        position: relative;
        width: 199px;
        height : 200px;
    }
    .circle_process .wrapper{
        width: 100px;
        height: 200px;
        position: absolute;
        top:0;
        overflow: hidden;
    }
    .circle_process .right{
        right:0;
    }
    .circle_process .left{
        left:0;
    }
    .circle_process .circle{
        width: 160px;
        height: 160px;
        border:20px solid transparent;
        border-radius: 50%;
        position: absolute;
        top:0;
        transform : rotate(-135deg);
    }
    .circle_process .rightcircle{
        border-top:20px solid lightblue;
        border-right:20px solid lightblue;
        right:0;
        -webkit-animation: circle_right 5s linear infinite;
    }
    .circle_process .leftcircle{
        border-bottom:20px solid lightblue;
        border-left:20px solid lightblue;
        left:0;
        -webkit-animation: circle_left 5s linear infinite;
    }
    @-webkit-keyframes circle_right{
        0%{
            -webkit-transform: rotate(-135deg);
        }
        50%,100%{
            -webkit-transform: rotate(45deg);
        }
    }
    @-webkit-keyframes circle_left{
        0%,50%{
            -webkit-transform: rotate(-135deg);
        }
        100%{
            -webkit-transform: rotate(45deg);
        }
    }

css3中圆形进度条效果如下：

本篇文章到这里就全部结束了，更多精彩内容大家可以关注php中文网！！！