【CSS】环形进度条
效果图
原理剖析
1.先完成这样一个会旋转半圆（这个很简单吧）。
2.overflow: hidden;
在这个半圆所在的地方加上一个包容块。
3.在中间定位一个白色的圆形做遮挡。
4.接着以同样的方式完成另一半圆。
5.使用animate配合时间完成衔接。
其他逻辑可能需要你通过角度进行 js 编码。
源码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>环形进度条</title>
<style>
.wrapper {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 4em;
height: 4em;
margin: auto;
}
.container {
position: absolute;
top: 0;
bottom: 0;
width: 2em;
overflow: hidden;
}
.halfCir {
width: 2em;
height: 4em;
background: red;
}
.container1 {
left: 2em;
}
.container1 .halfCir {
left: 0;
border-radius: 0 4em 4em 0;
transform-origin: 0 50%;
animation: halfCir1 4s infinite linear;
}
.container2 {
left: 0;
}
.container2 .halfCir {
border-radius: 4em 0 0 4em;
transform-origin: 2em 2em;
animation: halfCir2 4s infinite linear;
}
@keyframes halfCir1 {
50%, 100% {
transform: rotateZ(180deg);
}
}
@keyframes halfCir2 {
0%, 50% {
transform: rotateZ(0);
}
100% {
transform: rotateZ(180deg);
}
}
.wrapper::after {
position: absolute;
top: 0.5em;
left: 0.5em;
width: 3em;
height: 3em;
background: #fff;
border-radius: 50%;
content: "";
}
.cir {
position: absolute;
top: 0;
right: 0;
left: 0;
width: 0.5em;
height: 0.5em;
margin: auto;
background: red;
border-radius: 50%;
}
.cir2 {
transform-origin: 50% 2em;
animation: cir2 4s infinite linear;
}
@keyframes cir2 {
100% {
transform: rotateZ(360deg);
}
}
</style>
</head>
<body>
<div class="wrapper">
<div class="container container1">
<div class="halfCir"></div>
</div>
<div class="container container2">
<div class="halfCir"></div>
</div>
<div class="cir cir1"></div>
<div class="cir cir2"></div>
</div>
</body>
</html>
Vue 组件版
// index.vue
<cirle-progess
:circleDiam="100"
:circleColor="'#ddd'"
:progressSize="10"
:progressColor="'#ffaa00'"
:coverColor="'#fff'"
:text="'25%'"
:textColor="'#333'"
:textSize="28"
:value="25"
:cssUnit="'px'"
></circle-progess> // CircleProgess.vue
<template>
<view :style="circle">
<view :style="[circleBlock, circleBlockLeft]">
<view :style="[circleBlockProgress, circleBlockProgressLeft]">
<view :style="[circleBlockProgressRadius, circleBlockProgressRadiusLeft]"></view>
</view>
</view>
<view :style="[circleBlock, circleBlockRight]">
<view :style="[circleBlockProgress, circleBlockProgressRight]">
<view :style="[circleBlockProgressRadius, circleBlockProgressRadiusRight]"></view>
</view>
</view>
<view :style="circleCover">{{ text }}</view>
</view>
</template> <script>
export default {
name: 'CircleProgess',
props: {
circleDiam: { // 环形圆的直径
type: Number,
default: 100
},
circleColor: { // 无进度条区域的颜色
type: String,
default: '#fff'
},
progressSize: { // 进度条的粗细
type: Number,
default: 10
},
progressColor: { // 进度条的颜色
type: String,
default: '#409EFF'
},
coverColor: { // 遮盖圆的颜色
type: String,
default: '#fff'
},
text: { // 中心文字
type: String,
default: ''
},
textSize: { // 中心文字大小
type: Number,
default: 16
},
textColor: { // 中心文字颜色
type: String,
default: '#333'
},
value: { // 百分比数值
type: Number,
default: 60
},
cssUnit: { // css单位
type: String,
default: 'px'
}
},
computed: {
circle() {
return {
position: 'relative',
width: this.circleDiam + this.cssUnit,
height: this.circleDiam + this.cssUnit,
backgroundColor: this.circleColor,
borderRadius: '50%',
overflow: 'hidden'
}
},
circleBlock() {
return {
position: 'absolute',
width: this.circleDiam / 2 + this.cssUnit,
height: this.circleDiam + this.cssUnit,
overflow: 'hidden'
}
},
circleBlockLeft() {
return {
left: 0
}
},
circleBlockRight() {
return {
right: 0
}
},
circleBlockProgress() {
return {
position: 'absolute',
width: this.circleDiam / 2 + this.cssUnit,
height: this.circleDiam + this.cssUnit
}
},
circleBlockProgressLeft() {
const val = this.value > 50 ? -180 + (this.value - 50) * 3.6 : -180
return {
backgroundColor: this.progressColor,
transformOrigin: '100% 50%',
transform: 'rotate(' + val + 'deg)'
}
},
circleBlockProgressRight() {
const val = this.value > 50 ? 0 : -180 + (this.value * 3.6)
return {
backgroundColor: this.progressColor,
transformOrigin: '0% 50%',
transform: 'rotate(' + val + 'deg)'
}
},
circleBlockProgressRadius() {
return {
position: 'absolute',
width: this.progressSize + this.cssUnit,
height: this.progressSize + this.cssUnit,
borderRadius: '50%'
}
},
circleBlockProgressRadiusLeft() {
const backgroundColor = this.value > 50 ? this.progressColor : this.circleColor
const right = this.progressSize / 2
return {
top: 0,
right: '-' + right + this.cssUnit,
backgroundColor: backgroundColor
}
},
circleBlockProgressRadiusRight() {
const backgroundColor = this.value > 0 ? this.progressColor : this.circleColor
const left = this.progressSize / 2
return {
bottom: 0,
left: '-' + left + this.cssUnit,
backgroundColor: backgroundColor
}
},
circleCover() {
return {
position: 'absolute',
top: 0,
right: 0,
bottom: 0,
left: 0,
width: this.circleDiam - this.progressSize * 2 + this.cssUnit,
height: this.circleDiam - this.progressSize * 2 + this.cssUnit,
margin: 'auto',
backgroundColor: this.coverColor,
borderRadius: '50%',
color: this.textColor,
fontSize: this.textSize + this.cssUnit,
textAlign: 'center',
lineHeight: this.circleDiam - this.progressSize * 2 + this.cssUnit,
zIndex: 1
}
}
}
}
</script>
【CSS】环形进度条的更多相关文章
- 【css】如何实现环形进度条
最近团队的童鞋接到了一个有关环形进度条的需求,想要还原一个native的沿环轨迹渐变进度条的效果,看到这个效果的时候,笔者陷入了沉思.. 环形进度条的效果,最先想到的就是使用CSS利用两个半圆的hac ...
- 环形进度条的实现方法总结和动态时钟绘制（CSS3、SVG、Canvas）
缘由: 在某一个游戏公司的笔试中,最后一道大题是,“用CSS3实现根据动态显示时间和环形进度[效果如下图所示],且每个圆环的颜色不一样,不需要考虑IE6~8的兼容性”.当时第一想法是用SVG,因为SV ...
- Canvas实现环形进度条
Canvas实现环形进度条 直接上代码: <canvas width="200" height="200" >60%</canvas> ...
- 基于svg的环形进度条
其实需求是这么一个基于日期的环形进度条,开始用css3写了一下感觉太麻烦了,于是抽了点时间用svg画了一个. 不多说 上代码: css: <style> circle { -webkit- ...
- 图解CSS3制作圆环形进度条的实例教程
圆环形进度条制作的基本思想还是画出基本的弧线图形,然后CSS3中我们可以控制其旋转来串联基本图形,制造出部分消失的效果,下面就来带大家学习图解CSS3制作圆环形进度条的实例教程 首先,当有人说你能不能 ...
- CSS实现进度条和订单进度条
最近半个月为了期末考试,可要了学渣我半瓶血啊!今天本该好好复习的,可是状态不好,就随便找点乐子玩一玩,于是乎就想起之前面试时面试官给的一道题(见标题),那就弄点简单的小玩意给自己洗洗脑咯. 简单地效果 ...
- iOS带动画的环形进度条(进度条和数字同步)
本篇写的是实现环形进度条,并带动画效果,要实现这些,仅能通过自己画一个 方法直接看代码 为了方便多次调用,用继承UIView的方式 .m文件 #import <UIKit/UIKit.h> ...
- iOS 开发技巧-制作环形进度条
有几篇博客写到了怎么实现环形进度条,大多是使用Core Graph来实现,实现比较麻烦且效率略低,只是一个小小的进度条而已,我们当然是用最简单而且效率高的方式来实现. 先看一下这篇博客,博客地址:ht ...
- iOS一分钟学会环形进度条
有几篇博客写到了怎么实现环形进度条,大多是使用Core Graph来实现,实现比较麻烦且效率略低,只是一个小小的进度条而已,我们当然是用最简单而且效率高的方式来实现.先看一下这篇博客,博客地址:htt ...
随机推荐
- spark2.1源码分析4：spark-network-common模块的设计原理
spark-network-common模块底层使用netty作为通讯框架,可以实现rpc消息.数据块和数据流的传输. Message类图: 所有request消息都是RequestMessage的子 ...
- udt的java实现
udt协议是什么? 我就不回答了,可以网上搜索,一直都是c++的,java的实现已经很久没有修改了 经过测试,java版本有些一问题,现在已经将其修复,已经上传到csdn 另外自己根据实际的应用,再次 ...
- php结合layui前端实现 多图上传
前端html代码 <div class="layui-upload"> <button type="button" class="l ...
- Ubuntu、CenOS、Debian等不同版本简单概念与不同
最近在云计算中使用虚拟机,在进行Xen搭建时发现Ubuntu好像从10版本没有开始官方维护,又去了解了更多的Linux的版本 后续打算采用CenOS尝试一下 下文选自https://blog.csdn ...
- C#压缩文件,C#压缩文件夹,C#获取文件
using System; using System.Data; using System.Configuration; using System.Collections.Generic; using ...
- ng 1.2 ng-bind-html 用法
使用ng-bind-html渲染html字符串时需要在控制器外注册$sec 过滤器 //过滤器渲染html字符串 app.filter('to_trusted',['$sce',function($s ...
- JS防抖与节流函数封装
防抖 在监听scroll事件的时候经常会用到防抖,当滚动到某一位置而触发状态,从而不会出现频繁滚动持续触发事件的情况 防抖的事件处理机制仅触发一次且必须是结束状态下才会执行 function debo ...
- cobbler登录web界面时出现“Internal Server Error”
当进行cobbler配置后,并进行web登录时,出现错误: 先查看其日志位置 #cat /etc/httpd/conf.d/ssl.conf 在其中位置发现其错误的日志位置为/etc/httpd/lo ...
- java并发编程概念
并发:当有多个线程在操作时,如果系统只有一个CPU,则它根本不可能真正同时进行一个以上的线程,它只能把CPU运行时间划分成若干个时间段,再将时间 段分配给各个线程执行,在一个时间段的线程代码运行时,其 ...
- elk报警监控之sentinl 钉钉+邮件告警
注:我的elk sentinl版本都是6.5.1 前期知识 es的查询语法.es watcher使用方法. https://www.cnblogs.com/pilihaotian/p/5830754. ...