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 mkdir() 函数
定义和用法 mkdir() 函数创建目录. 如果成功该函数返回 TRUE,如果失败则返回 FALSE. 语法 mkdir(path,mode,recursive,context) 参数 描述 path ...
- PHP acos() 函数
实例 返回不同数的反余弦: <?phpecho(acos(0.64) . "<br>");echo(acos(-0.4) . "<br>&q ...
- PHP mt_rand() 函数
实例 生成随机数: <?phpecho(mt_rand() . "<br>");echo(mt_rand() . "<br>"); ...
- luogu 4331 [BalticOI 2004]Sequence 数字序列
LINK:数字序列 这是一道论文题 我去看了一眼论文鸽的论文. 发现讲的还算能懂.可并堆的操作也讲的比较清晰. 对于这道题首先有一个小trick 我们给a数组全部减去其对应的下标这样我们求出来的b数组 ...
- JS 常用方法汇总(不定期更新)
/** * 获取当前日期 * @returns {string} */ Common.currentDate = function () { // 获取当前日期 var date = new Date ...
- react-router分析 - 一、history
react-router基于history库,它是一个管理js应用session会话历史的js库.它将不同环境(浏览器,node等)的变量统一成了一个简易的API来管理历史堆栈.导航.确认跳转.以及s ...
- Flexible实现H5移动端适配小demo
前言 看了宇哥关于移动端适配的分享后,加上目前公司项目也需要做移动端适配,今天就抽空搞了搞.目前业界还是比较推崇手淘使用"rem+viewport"的解决方案,今天自己模仿手淘fl ...
- 社区版Intelij IDEA快速创建一个spring boot项目（找不到sping Initializer选项）
首先作为一个初学spring boot的小白,在学习过程中肯定会遇到各种问题... So,问题出现:在我想快速创建spring boot项目时,却在新建列表中找不到sping Initializer这 ...
- node根据excel批量更名
程序预览 index.js var xlsx = require('node-xlsx'); var fs = require('fs'); process.stdin.setEncoding('ut ...
- 仅需1秒！搞定100万行数据：超强Python数据分析利器
前言 使用Python进行大数据分析变得越来越流行.这一切都要从NumPy开始,它也是今天我们在推文介绍工具背后支持的模块之一. 2 Vaex Vaex是 一种更快.更安全.总体上更方便的方法,可以使 ...