【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 ...
随机推荐
- Postman Could not get any response
在使用postman时遇到的小问题,记录一下: 报错信息如下: Could not get any response There was an error connecting to https:// ...
- DLC 基本定律与规则2
逻辑函数的相等 布尔代数 9 个定律 三条规则 代入规则
- (14/24) css进阶：（入门）去除冗余的css
在平时的项目开发中,我们会引入一些框架,比如:Bootstrap,但是在项目中通常我们只使用它的一小部分,还有部分是冗余的.更有甚有时候需求更改,带来DOM结构的更改,这时候我们可能无暇关注CSS样式 ...
- java中四种修饰符(private、default、protected、public)的访问权限
权限如下: no. 范围 private default protected public 1 同一包下的同一个类 √ √ √ √ 2 同一包下的不同类 × √ √ √ 3 不同包下的子类 × × √ ...
- ORM版学员管理系统 2
学生信息管理 展示学生信息 URL部分 url(r'^student_list/', app01_views.student_list, name="student_list"), ...
- 40_redux_counter应用_redux完善版本
项目结构: 代码: import React from 'react'; import ReactDOM from 'react-dom'; import store from './redux/st ...
- Springboot 使用thymeleaf模板layout布局
使用layout布局前应该在pom文件中导入thymeleaf(dialect)依赖:如下 <properties> <project.build.sourceEncoding> ...
- 查找运行时间超过1天的frmweb进程
EBS中经常会出现一些zombie的frmweb进程,特征是运行时间很长,占用CPU都(1个frmweb进程占用1个CPU线程100%资源)下面脚本是利用awk找到运行时间超过1天的frmweb进程, ...
- Python常用字符编码（转）
Python常用字符编码 字符编码的常用种类介绍 第一种:ASCII码 ASCII(American Standard Code for Information Interchange,美国信息交 ...
- 视频修复工具recover_mp4,视频录制一半掉电,如何查看已保存数据?
在生产环境中,视频通常是一种重要的文件证据,但是,如果因为各种原因,导致视频在录制到一半过程中失败, 比如:监控到一半,录制设备掉电.虽然,掉电后的视频肯定找不到,但是,有时,长时间工作生产的视频通常 ...