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更新的进度条. 技术细节 ...
随机推荐
- 4-Pandas之数据类型与数据筛选
一.数据类型 1.Pandas的数据类型主要结合了pandas和numpy两个模块中的数据类型,包括以下几种: float int bool datetime64[ns]------>日期类型 ...
- 转）Understanding Java Memory Management
Understanding Java Memory Management - IBM Java Native Interface (JNI) Objects and Code Java Native ...
- 好用的连接池-druid
druid连接池是阿里巴巴的数据库连接池项目.它的一个亮点强大的监控功能以及防SQL注入,同时不影响性能.这里是它的GitHub地址.感觉druid扩展的功能还是很实用的. 实用的功能 详细的监控 E ...
- OpenCL 增强单work-item kernel性能策略
1.基于反馈的Optimization Report解决单个Work-item的Kernel相关性 在许多情况下,将OpenCL™应用程序设计为单个工作项内核就足以在不执行其他优化步骤的情况下最大化性 ...
- python字符串和数字的基本运算符
python字符穿的4种表达方式 name='张三' name="张三" name='''张三''' name="""张三""&q ...
- python3.2求和与最值
#1到100求和sum1=0for x in range(101): sum1=sum1+xprint(sum1) #1到100偶数求和sum2=0for x in range(0,101,2): p ...
- 基于Qt实现的TCP端口数据转发服务器
对于Qt,比较喜欢qt的sdk框架,我也是用于做一些工作中用到的工具软件,基于qt的sdk做起来也比较快: 一.概述 今天要说的这个tcp端口转发服务器,主要是用于将监听端口的数据转发到另外一个服务器 ...
- JavaIO流,万物皆文件
引入IO的原因 基本概念: 数据源和流的概念 IO流的概念细分 IO流的体系 IO流在Java中的流对象:inputStream .... Java对象的序列化和反序列化: 1 为什么需要序列化和反序 ...
- Linux Centos 下安装npm 实测可用
转载地址 https://blog.csdn.net/u012129607/article/details/60966045 1.root 登录linux 2.没有目录就自己创建一个 cd /usr/ ...
- 使用 VMware Workstation Pro 让 PC 提供云桌面服务——学习笔记（一）
最终效果: 能够通过xshell等终端设备, 远程访问虚拟机 操作步骤 1. 安装VMware 网上自行下载VMware 软件,这里不给出详细操作 2. 下载安装系统 这里使用 Centos 的lin ...