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更新的进度条. 技术细节 ...
随机推荐
- UDP 绑定信息
""" 建立->绑定本地ip地址和端口号->接收数据->转码输出->关闭客户端 """ from socket im ...
- luogu 4331 [BalticOI 2004]Sequence 数字序列
LINK:数字序列 这是一道论文题 我去看了一眼论文鸽的论文. 发现讲的还算能懂.可并堆的操作也讲的比较清晰. 对于这道题首先有一个小trick 我们给a数组全部减去其对应的下标这样我们求出来的b数组 ...
- efcore 新特性 SaveChanges Events
efcore 新特性 SaveChanges Events Intro 昨天早上看到之前关注的一个 efcore 的 issue 被 closed ,于是看了一眼, ef core 新合并了一个 PR ...
- PHP代码混淆与加密——php screw plus
php是一个开源的.广受欢迎的语言,php应用常常是以代码明文的发式发布,但是有时候对于发布的代码我们想要进行保护,需要对php代码进行混淆与加密,让增加破解者的逆向难度,从而达到保护自己成果的目的. ...
- Xposed原理分析
目录 安卓系统启动 什么zygote? 安卓应用运行? Xposed介绍 Xposed构成 Xposed初始化大体工作流程 源码分析 初始化 app_main#main app_main#initia ...
- 《JAVA并发编程的艺术》学习笔记
第一章:并发编程的挑战 1.1 上下文切换 即使是单核处理器也支持多线程执行代码,CPU通过给每个线程分配CPU时间片来实现这个机制.时间片是CPU分配给各个线程的时间,因为时间片非常短,所以CPU通 ...
- phpredis 扩展之操作 Redis，记下来记下来！
phpredis 是 redis 的 php 的一个扩展,效率是相当高有链表排序功能,对创建内存级的模块业务关系很有用 $redis = new Redis(); $redis->connect ...
- 深度学习论文翻译解析（十二）：Fast R-CNN
论文标题:Fast R-CNN 论文作者:Ross Girshick 论文地址:https://www.cv-foundation.org/openaccess/content_iccv_2015/p ...
- python的单下划线和双下划线
python 类中的单下划线开头的变量表示:该方法为类的私有方法,原则上外部不能访问,但是用._XX是可以访问到的 双下划线开头则是强制外部不能直接访问的用.__XX是访问不到的,它内部其实是将变量名 ...
- mqtt第一次接触
一.接触的原因 公司最近要求接手关于系统集成道闸的部分,其中系统和第三方系统是通过mqtt进行交互的.所以提前了解一下mqtt的基础概念. 二.mqtt的基本概念 1. mqtt的定义 Message ...