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更新的进度条. 技术细节 ...
随机推荐
- Python List sort()方法
描述 sort() 函数用于对原列表进行排序,如果指定参数,则使用比较函数指定的比较函数.高佣联盟 www.cgewang.com 语法 sort()方法语法: list.sort(cmp=None, ...
- PHP libxml_clear_errors() 函数
定义和用法 libxml_clear_errors() 函数清空 libxml 错误缓冲. 语法 libxml_clear_errors() 实例 <?phplibxml_clear_error ...
- Android中Activity启动模式探索
Android中启动模式(launchMode)分为standard, singleTop, singleTask, singleInstance四种,可通过AndroidManifest.xml文件 ...
- windows：shellcode生成框架和加载
https://www.cnblogs.com/theseventhson/p/13194646.html 分享了shellcode 的基本原理,核心思路是动态获取GetProcAddress和Lo ...
- OpenCL设计优化（基于Intel FPGA SDK for OpenCL）
1.首先了解Intel FPGA SDK for OpenCL实现OpenCL的设计组件,包括: kernels, global memory interconnect, local memory, ...
- 使用Luhn算法实现信用卡号验证
问题描述: 2:信用卡号的验证 [信用卡号的验证] 当你输入信用卡号码的时候,有没有担心输错了而造成损失呢?其实可以不必这么 担心,因为并不是一个随便的信用卡号码都是合法的,它必须通过 Luhn 算法 ...
- TCP学习指北
限于博主水平有限不敢说指南,但应该能够避免刚学TCP的同学出现找不着北的情况. TCP与UDP的区别 区别: UDP是无连接的,而TCP是面向连接的,传数据前要先建立连接. UDP可以一对多,多对多通 ...
- 实战丨快速搭建实时 Todo List 应用
技术背景 借助云开发数据库的实时推送能力和云开发官方出品的前后端一体化部署工具CloudBase Framework,可以轻松搭建一个完整应用. 效果展示 示例地址:http://cloud.qinm ...
- python设计模式之外观模式
python设计模式之外观模式 系统会随着演化变得非常复杂,最终形成大量的(并且有时是令人迷惑的)类和交互,这种情况并不少见.许多情况下,我们并不想把这种复杂性暴露给客户端.外观设计模式有助于隐藏系统 ...
- Tensorflow Cpu不支持AVX
Tensorflow从1.6开始从AVX编译二进制文件,所以如果你的CPU不支持AVX 你需要 从源码编译 下载旧版 从源码编译比较麻烦,如果你是初学的话,我建议使用旧版. 安装旧版: pip3 in ...