CSS3实现圆环进度条
摘要：圆环进度条被应用于各个场景，比如我们可以用来表示加载进度等。通常我们可以用 css3 的动画去实现。
详解 css3 实现圆环进度条
简单的画一个圆环，我们都知道如何使用 css 画一个圆环。（利用border属性、border-radius属性）
HTML 代码：
<div class="circle></div>
CSS 代码：
.circle{
width:160px;
height:160px;
border:20px solid red;
border-radius:50%;
}
实现圆环进度条属性，我们利用 css 画扇形，然后结合 css3 的动画属性去实现。结合代码去讲解：
HTML代码：
<div class="circle-progress">
<div class="content left">
<div class="circle left-circle"></div>
</div>
<div class="content right">
<div class="circle right-circle"></div>
</div>
</div>
首先确定圆环进度条最外层 css 的属性：
.circle-progress {
position: relative;
width: 200px;
height: 200px;
border: 1px solid #888; /*可选属性,仅供测试使用*/
}
然后定位 content 以及 left 和 right 的属性值：
.content {
position: absolute;
top:;
width: 100px;
height: 200px;
margin:;
padding:;
overflow: hidden;
}
.left {
left:;
}
.right {
right:;
}
最后确定 left-circle 和 right-circle 属性：
.circle {
position: absolute;
margin:;
width: 160px;
height: 160px;
border-radius: 50%;
border: 20px solid transparent;
transform: rotate(135deg);
}
.left-circle {
left:;
border-top-color: green;
border-left-color: green;
animation: circle-left 5s linear infinite;
}
.right-circle {
right:;
border-bottom-color: green;
border-right-color: green;
animation: circle-right 5s linear infinite;
}
动画 css3 代码：
@keyframes circle-right {
0% {
transform: rotate(135deg);
}
50%,
100% {
transform: rotate(315deg);
}
}
@keyframes circle-left {
0%,
50% {
transform: rotate(135deg);
}
100% {
transform: rotate(315deg);
}
}
完整的代码：
<!DOCTYPE html>
<html> <head>
<title>圆环进度条</title>
<meta charset="utf-8" name="viewport" content="width=device-width;initial-scale=1.0" />
<style type="text/css">
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
} .circle-progress {
position: relative;
width: 200px;
height: 200px;
border: 1px solid #888;
} .content {
position: absolute;
top: 0;
width: 100px;
height: 200px;
margin: 0;
padding: 0;
overflow: hidden;
} .left {
left: 0;
} .right {
right: 0;
} .circle {
position: absolute;
margin: 0;
width: 160px;
height: 160px;
border-radius: 50%;
border: 20px solid transparent;
transform: rotate(135deg);
} .left-circle {
left: 0;
border-top-color: green;
border-left-color: green;
animation: circle-left 5s linear infinite;
} .right-circle {
right: 0;
border-bottom-color: green;
border-right-color: green;
animation: circle-right 5s linear infinite;
} @keyframes circle-right {
0% {
transform: rotate(135deg);
}
50%,
100% {
transform: rotate(315deg);
}
} @keyframes circle-left {
0%,
50% {
transform: rotate(135deg);
}
100% {
transform: rotate(315deg);
}
}
</style>
</head> <body>
<div class="circle-progress">
<div class="content left">
<div class="circle left-circle"></div>
</div>
<div class="content right">
<div class="circle right-circle"></div>
</div>
</div>
</body> </html>
CSS3实现圆环进度条的更多相关文章
- css3 制作圆环进度条
引子 移动端做一个 loadiing 加载的图标,跟以往沿用的都不太一样,是一个圆环进度条,圆环进度条也就罢了,还得能用百分比控制. CSS3 实现圆环 demo 刚开始写这个圆环的时候是参照帖子上给 ...
- 两种CSS3圆环进度条详解
晚上睡觉之前,我抽了1个多小时,研究了一下圆环进度条,结合从网上查阅的资料,我终于掌握了两种圆环的生成方法. 这次的效果就是单纯的CSS3效果,也没有写具体的JS,等以后有时间在好好整理一下吧~. 第 ...
- Vue/React圆环进度条
数据展示,一直是各行各业乐此不疲的需求,具体到前端开发行业,则是各种各种图表数据展示,各种表格数据展示,烦不胜烦(繁不胜繁)! 前几天刚做了折线图.柱状图.饼状图之类的图表数据展示效果,今天又碰到了类 ...
- css3圆形百分比进度条的实现原理
原文地址:css3圆形百分比进度条的实现原理 今天早上起来在查看jquery插件机制的时候,一不小心点进了css3圆形百分比进度条的相关文章,于是一发不可收拾,开始折腾了... 关于圆形圈的实现,想必 ...
- CSS3时钟式进度条
CSS3时钟式进度条,加载完成时生成一个圆,数字慢慢变成100,适时的显示加载进度.友情提醒,如果预览时网页左下角提示错误,刷新一下就可以看到效果了:实际使用中不会出现这样的问题. <!DOCT ...
- canvas绘制百分比圆环进度条
开发项目,PM会跟踪项目进度:完成某个事情,也可以设置一个完成的进度. 这里用canvas绘制一个简单百分比圆环进度条. 看下效果: 1. 动画方式 2. 静默方式 // 贴上代码,仅供参考 ...
- svg实现圆环进度条
开源实现:https://github.com/lugolabs/circles 自行实现:圆环与svg画布间剩的空间太多. <!DOCTYPE html> <html> &l ...
- 浅谈一下关于使用css3来制作圆环进度条
最近PC端项目要做一个这样的页面出来,其他的都很简单,关键在于百分比的圆环效果.我最初打算是直接使用canvas来实现的,因为canvas实现一个圆是很简便的. 下面贴出canvas实现圆环的代码,有 ...
- CSS3实现圆形进度条
介绍 闲来无事,去了CSS3Plus网站逛了逛,发现了一个很有意思的实现--css3实现进度条.粗略看了下代码,发现原理其实很简单,不难理解. 现在在此讲述下原理并实现一个1s更新的进度条. 技术细节 ...
随机推荐
- PHP addChild() 函数
实例 给 body 元素和 footer 元素添加一个子元素: <?php$note=<<<XML<note>高佣联盟 www.cgewang.com<to& ...
- IOFFSETOF ICONTAINEROF IQUEUE_ENTRY
#include <iostream> #define IOFFSETOF(TYPE, MEMBER) ((size_t) &((TYPE *)0)->MEMBER) #de ...
- idea修改maven项目版本号
1 先安装插件 2 控制台执行命令 mvn build-helper:parse-version versions:set -DnewVersion=1.1-SNAPSHOT versions:co ...
- python 操作元组 列表===python中三大宝刀（字典已经再上一遍 说过）
字典俗称,世界有多大就能装多大 列表俗称,你们决定 元组俗称,可远观而不可亵玩焉 列表的相关操作a=['1','2','3','5','6','7']# print(a[0])# print(a[0: ...
- com.fasterxml.jackson.core.JsonParseException: Unrecognized token 'user'
nested exception is com.fasterxml.jackson.core.JsonParseException: Unrecognized token 'user' 可能错误原因: ...
- Kafka 错误信息 java.io.IOException: Can't resolve address: VM_0_15_centos:9092
kafka 安装完成之后 代码运行的时候,运行完成报这个错误 java.io.IOException: Can't resolve address: VM_0_15_centos:9092 解决办 ...
- 嵌入式linux系统应用开发
关于嵌入式系统 平时大家说的嵌入式其实范围比较广的,是一种软硬件可裁剪,以应用为中心开发的专用系统,硬件平台可以是单片机,或者以ARM系列的处理器.单片机一般直接裸奔程序,不过现在有了好多基于单片 ...
- C/C++陷阱与套路，当年就是折在这些地儿…
摘要:本文结合作者的工作经验和学习心得,对C++语言的一些高级特性,做了简单介绍:对一些常见的误解,做了解释澄清:对比较容易犯错的地方,做了归纳总结:希望借此能增进大家对C++语言了解,减少编程出错, ...
- 企业级Gitlab-ci实践
前言 吐槽一波 2020年6月2号刚入职公司时,第一感觉是集群环境是个大坑!内网一套,公网一套.内网采用单节点Kubernetes,公网采用aliyun托管的X节点Kubernetes(还有节点是2C ...
- java 访问修饰符与代码块
一 访问修饰符 要想本包中的类都可以访问不加修饰符即可: 要想仅能在本类中访问使用private修饰: 要想本包中的类与其他包中的子类可以访问使用protected修饰 要想所有包中的所有类都可以访 ...