【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 ...
随机推荐
- New Journey--工作五年所思所感小记
正式参加工作满五年了,2013年7月9日走入游戏行业.之前就计划着应该提笔写点什么留下来,但当日子真的到了,竟是不知说些什么了.14年年中的时候我曾写过一篇工作一年的总结,现在回头读起来,还真是别有一 ...
- remote: Repository not found. fatal: repository 'https://github.com/***/***.git/' not found
通过命令添加新repository到git hub在执行最后一步命令(如下所示)的时候报错 git push -u origin master error:remote: Repository not ...
- Python2中生成时间戳（Epoch，或Timestamp）的常见误区
在Python2中datetime对象没有timestamp方法,不能很方便的生成epoch,现有方法没有处理很容易导致错误.关于Epoch可以参见时区与Epoch 0 Python中生成Epoch ...
- IDEA开发环境配置
1.JDK 2.Maven 3.Tomcat 当找不到 Artifacts , 可以查看一下: 4.配置 terminal 为 git 终端 5.MySQL 6.文件服务器 7.配置 mybatis
- Python笔记：编码问题
1. python2的编码: python2中使用的是ASCII码,所以不支持中文,如果要在python2中写入中文编码,需要在文件头编写: #-*- encoding:utf-8 -*- 2. 不同 ...
- HttpLogBrowser-GUI日志分析工具
登陆https://www.iis.net/downloads搜索HttpLogBrowser获得最新版本
- Spring Boot——Linux 启动方式
1.前台启动:(ctrl+c会关闭程序) java -jar ****.jar 2.后台启动:(& 后台启动) java -jar ****.jar & 3.控制台输出启动 ...
- arcgis10.2 sde配置
本机配置好oracle11g server 64位+client 32位.
- MySQL（Python+ORM）
本篇对于Python操作MySQL主要使用两种方式: 原生模块 pymsql ORM框架 SQLAchemy pymsql pymsql是Python中操作MySQL的模块,其使用方法和MySQLdb ...
- SpringMVC参数绑定总结
springMvc作用: a) 接收请求中的参数 b) 将处理好的数据返回给页面参数绑定(就是从请求中接收参数): a) 默认支持的类型: request, response, se ...