关键词：
圆环形进度条制作的基本思想还是画出基本的弧线图形,然后CSS3中我们可以控制其旋转来串联基本图形,制造出部分消失的效果,下面就来带大家学习图解CSS3制作圆环形进度条的实例教程
首先，当有人说你能不能做一个圆形进度条效果出来时，如果是静态完整圆形进度条，那么就很简单了：
.circleprogress{
width: 160px;
height: 160px;
border:20px solid red;
border-radius: 50%;
}
.circleprogress{
width: 160px;
height: 160px;
border:20px solid red;
border-left:20px solid transparent;
border-bottom:20px solid transparent;
border-radius: 50%;
}
然后还是会说，这个也不难啦。可是，如果不是刚好都是45度的倍数呢？
OK，我们先设置一个200x200的方块，然后我们在这里面完成我们的效果：
.circleProgress_wrapper{
width: 200px;
height: 200px;
margin: 50px auto;
position: relative;
border:1px solid #ddd;
}
接下来我将在这个容器里再放两个矩形，每个矩形都占一半：
<div class="circleProgress_wrapper"> <div class="wrapper right"> <div class="circleProgress rightcircle"></div> </div> <div class="wrapper left"> <div class="circleProgress leftcircle"></div> </div> </div> .wrapper{ width: 100px; height: 200px; position: absolute; top:0; overflow: hidden; } .rightright{ rightright:0; } .left{ left:0; }
这里重点说一下.wrapper 的overflow:hidden; 起着关键性作用。这两个矩形都设置了溢出隐藏，那么当我们去旋转矩形里面的圆形的时候，溢出部分就被隐藏掉了，这样我们就可以达到我们想要的效果。
从html结构也已看到，在左右矩形里面还会各自有一个圆形，先讲一下右半圆：
.circleProgress{
width: 160px;
height: 160px;
border:20px solid transparent;
border-radius: 50%;
position: absolute;
top:0;
}
.rightcircle{
border-top:20px solid green;
border-right:20px solid green;
rightright:0;
}
可以看到，效果已经出来了，其实本来是一个半圆弧，但由于我们设置了上边框和右边框，所以上边框有一半溢出而被隐藏了，所以我们可以通过旋转得以还原：
.circleProgress{
width: 160px;
height: 160px;
border:20px solid transparent;
border-radius: 50%;
position: absolute;
top:0;
-webkit-transform: rotate(45deg);
}
所以只要旋转自己想要的角度就可以实现任意比例的进度条。接下来把左半圆弧也实现，变成一个全圆：
.leftcircle{
border-bottom:20px solid green;
border-left:20px solid green;
left:0;
}
紧接着，就是让它动起来，原理是这样的， 先让右半圆弧旋转180度，再让左半圆弧旋转180度 ，这样，两个半圆弧由于先后都全部溢出而消失了，所以看起来就是进度条再滚动的效果：
.rightcircle{
border-top:20px solid green;
border-right:20px solid green;
rightright:0;
-webkit-animation: circleProgressLoad_right 5s linear infinite;
}
.leftcircle{
border-bottom:20px solid green;
border-left:20px solid green;
left:0;
-webkit-animation: circleProgressLoad_left 5s linear infinite;
}
@-webkit-keyframes circleProgressLoad_right{
0%{
-webkit-transform: rotate(45deg);
}
50%,100%{
-webkit-transform: rotate(225deg);
}
}
@-webkit-keyframes circleProgressLoad_left{
0%,50%{
-webkit-transform: rotate(45deg);
}
100%{
-webkit-transform: rotate(225deg);
}
}
当然，我们只需要调整一下角度就可以实现反向的效果：
.circleProgress{
width: 160px;
height: 160px;
border:20px solid transparent;
border-radius: 50%;
position: absolute;
top:0;
-webkit-transform: rotate(-135deg);
}
@-webkit-keyframes circleProgressLoad_right{
0%{
-webkit-transform: rotate(-135deg);
}
50%,100%{
-webkit-transform: rotate(45deg);
}
}
@-webkit-keyframes circleProgressLoad_left{
0%,50%{
-webkit-transform: rotate(-135deg);
}
100%{
-webkit-transform: rotate(45deg);
}
}
好的，接下来就是奔向最终效果了，正如我们一开始看到的那样，有点像我们使用360卫士清理垃圾时的类似效果，当然不是很像啦：
.circleProgress_wrapper{
width: 200px;
height: 200px;
margin: 50px auto;
position: relative;
border:1px solid #ddd;
}
.wrapper{
width: 100px;
height: 200px;
position: absolute;
top:0;
overflow: hidden;
}
.rightright{
rightright:0;
}
.left{
left:0;
}
.circleProgress{
width: 160px;
height: 160px;
border:20px solid rgb(232, 232, 12);
border-radius: 50%;
position: absolute;
top:0;
-webkit-transform: rotate(45deg);
}
.rightcircle{
border-top:20px solid green;
border-right:20px solid green;
rightright:0;
-webkit-animation: circleProgressLoad_right 5s linear infinite;
}
.leftcircle{
border-bottom:20px solid green;
border-left:20px solid green;
left:0;
-webkit-animation: circleProgressLoad_left 5s linear infinite;
}
@-webkit-keyframes circleProgressLoad_right{
0%{
border-top:20px solid #ED1A1A;
border-right:20px solid #ED1A1A;
-webkit-transform: rotate(45deg);
}
50%{
border-top:20px solid rgb(232, 232, 12);
border-right:20px solid rgb(232, 232, 12);
border-left:20px solid rgb(81, 197, 81);
border-bottom:20px solid rgb(81, 197, 81);
-webkit-transform: rotate(225deg);
}
100%{
border-left:20px solid green;
border-bottom:20px solid green;
-webkit-transform: rotate(225deg);
}
}
@-webkit-keyframes circleProgressLoad_left{
0%{
border-bottom:20px solid #ED1A1A;
border-left:20px solid #ED1A1A;
-webkit-transform: rotate(45deg);
}
50%{
border-bottom:20px solid rgb(232, 232, 12);
border-left:20px solid rgb(232, 232, 12);
border-top:20px solid rgb(81, 197, 81);
border-right:20px solid rgb(81, 197, 81);
-webkit-transform: rotate(45deg);
}
100%{
border-top:20px solid green;
border-right:20px solid green;
border-bottom:20px solid green;
border-left:20px solid green;
-webkit-transform: rotate(225deg);
}
}
自定义圆环形进度条实现(代码片段)
最近项目里边要用进度条，进度条中间展示进度，底部展示label，因为这个组件用的地方多，所以我就直接封装了一个通用组件。先看一下效果图：功能有：圆环的颜色和进度可以自定义；中间文字可... 查看详情
实现环形进度条的几种方法(代码片段)
环形进度条的问题，网上有很多的demo，也有各种不同的实现方式，很棒的实现也有很多，我这自己做一下一方面是想开阔一下自己的思路，一方面好久没看SVG和Canvas的东西了，基础的拿来熟悉下。DIV+CSS3这个是最基本的实现方式... 查看详情
自定义圆环形进度条实现(代码片段)
最近项目里边要用进度条，进度条中间展示进度，底部展示label，因为这个组件用的地方多，所以我就直接封装了一个通用组件。先看一下效果图：功能有：圆环的颜色和进度可以自定义；中间文字可... 查看详情
#进度条的制作(代码片段)
importtimeforiinrange(100):sys.stdout.write("#")#在屏幕上输出#time.sleep(0.1)sys.stdout.flush()#刷新功能 查看详情
进度条的制作unity
不说了直接上代码：LoadingPanel:usingUnityEngine;usingSystem.Collections;usingUnityEngine.UI;usingUnityEngine.SceneManagement;publicclassLoadingPanel:MonoBehaviourpublicSliderprocessBar;publicImageloadingBg;in 查看详情
前端页面加载进度条的制作
...效来表示，当加载完成的时候，再来显示内容。推荐一个制作进度条的网站icons8.com/preloaders/，制作进入条有以下几种方法。这种方法实现进度条简单粗暴，但是不是真实的。所以开发中一般不用这个。我们通过jquery来实现，这... 查看详情
进度条的制作
<styletype="text/css">*{margin:0pxauto;padding:0px}#wai{width:200px;height:10px;border:1pxsolid#60F;}#nei{width:0px;height:10px;background-color:#F33;float:left}</style></head><bo 查看详情
利用clip-path实现环形进度条
参考技术A 昨天逛网页时看到有用css与js实现环形进度条的（那位博主在面试时被要求当场写出环形进度条π_π），然后就想尝试下写出来（感觉好尴尬），说实话春节后遗症真可怕haha~ 看了网上的三种方法实... 查看详情
Adobe Flash Builder：如何制作带有进度条的 SWF 用于加载自身？
】AdobeFlashBuilder：如何制作带有进度条的SWF用于加载自身？【英文标题】：AdobeFlashBuilder:HowtomakeaSWFwithaprogressbarforloadingitself?【发布时间】：2021-03-0309:38:48【问题描述】：我有一个AS3项目，它的所有资产都使用[Embed]元数据标签嵌... 查看详情
如何用纯css3制作进度条
1、写一个样式为.containe的div用来包含进度条，其次是用样式为.title的div来包裹标题。 2、接下来，添加样式为.bar的di来包含填充和未填充的进度条样式。最后，在.bar里添加样式为.bar-unfill和.bar-fill的span标签。<div class="container... 查看详情
制作进度条(uislider)
怎样判断是否应当使用进度条 用进度条的主要目的是为了用一根管子的充满程度来直观地表示某种数值的百分比，进度条分为可拖动和不可拖动两种。 可拖动进度条和不可拖动进度条的原理几乎是一模一样，唯一的区别... 查看详情
一起talkandroid吧（第四百九十六回：自定义view实例二：环形进度条）
...MQTT客户端",这一回中咱们说的例子是"自定义View实例二：环形进度条"。闲话休提，言归正转，让我们一起TalkAndroid吧！知识回顾看官们，我们又回到了自定义View相关的知识中，在这里对旧知识做一些回顾：首先在四百六十五回中... 查看详情
关于vb.net进度条的实例
我想编一个进度条程序,让它每0.5秒进度增加1%,并用文本显示当前的进度,该如何实现?该实例有很多实现方法,下面介绍一种不同的给你:首先要在窗体中载入以下控件:progressbar(进度条),label(用来实时显示文本提示),两个timer(分别控... 查看详情
关于vb.net进度条的实例
我想编一个进度条程序,让它每0.5秒进度增加1%,并用文本显示当前的进度,该如何实现?这是我自己写的一个进度条控件，如图：边框粗细和边框颜色以及进度条颜色都可以调。进度条大小你可以自己拉伸。同时，进度条还提供了丰... 查看详情
增加高度时如何平滑进度条的拐角？
...【发布时间】：2018-01-2618:08:38【问题描述】：我正在尝试制作这样的进度条：我使用这个SO帖子来学习如何圆角：Link当您的进度条高度不超过6时效果很好。当我使用以下方法使进度条变大时：progressBar.transform=progre 查看详情
delphi:圆形进度(环形进度)(代码片段)
...现其颇觉有趣，遂研究其。最终效果图如下： 实现：制作TCircleProgress控件，实现方法参照系统之TGauge控件，CSDN上tp机器猫一个源码，结合GDI+绘制技术实现。设计控件图标时，Delphi7自带之ImageEditor在之后版本中没了，重装其... 查看详情
带有图像和圆形进度条的圆形按钮
...【发布时间】：2019-12-2819:29:53【问题描述】：我正在尝试制作一个按钮，里面有一个图像，外面有一个圆形进度条，按下按钮后是彩色的。我有一个.svg图像，它必须显示在一个直径为140像素的圆圈中。此图片必须是触发请求并... 查看详情
环形文字+css3制作图形+animation无限正反旋转的一个小demo
少啰嗦，先看效果图：（注意文字和太极图均可旋转，太极图使用css写成的！）css：/*太极图css--*/.Taijimargin:100px; width:192px; height:96px; background-color:#eee; border-color:#333; border-style:solid; border-width:4px4px100px4px; bo 查看详情