【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 ...
随机推荐
- 服务器后台代码生成TreeView的json字符串
1.根据treeView控件的属性建立vo类 package cn.allen.tree.vo; import java.util.List; import java.util.Map; public ...
- app:processOfficalDebugResources报错的几种解决方法；
Error:Execution failed for task ':app:processDebugResources'. 出现这个错误的同事,大多还会伴随的R文件的报错,对!是全部R文件都报错: 1 ...
- Extjs中grid 的ColumnModel 属性配置
一, 用数组的方式配置ColumnModel var colModel = new Ext.grid.ColumnModel([ { header:'编号', dataIndex:'id',width ...
- 解决wxParse空格不解析的问题
遇到的问题: 相似问题:https://blog.csdn.net/qq_41619741/article/details/85774865 http://html51.com/info-41786- ...
- 如何解决iOS界面操作导致导致NSTimer暂停计时的问题？
在NSTimer代码后面加上以下代码,这样滚动scroll的时候就不会暂停了.NSRunLoop *t = [NSRunLoop currentRunLoop];[t addTimer: timer ...
- Kubernetes dashboard安装
1. To download Dashboard plugin deployment YAML file from internet. #cd /home #mkdir k8s #cd k8s # w ...
- VUE系列一：VUE入门：搭建脚手架CLI（新建自己的一个VUE项目）
一.VUE脚手架介绍 官方说明:Vue 提供了一个官方的 CLI,为单页面应用快速搭建 (SPA) 繁杂的脚手架.它为现代前端工作流提供了 batteries-included 的构建设置.只需要几分 ...
- sql server 新语法 收藏
1.行转列 PIVOT函数,行转列,列转换UNPIVOT select * from ShoppingCart as C PIVOT(count(TotalPrice) FOR [Week] IN([ ...
- AS3获得当前文件的文件名
//当前文件的完整路径var fileUrl:String = this.loaderInfo.url;//查找路径的最后一个"/"var flag:int = fileUrl.l ...
- abaqus2016安装过程中出现error:unable to add abaqus command directory to PATH variable
请问abaqus2016安装过程中出现error:unable to add abaqus command directory to PATH variable是什么原因,怎么解决啊,总是安装失败 这 ...