关键词：
<template>
<div class="content" ref="box">
<svg
:id="idStr"
style="transform: rotate(-90deg)"
:width="width"
:height="width"
xmlns="http://www.w3.org/2000/svg"
>
<linearGradient :id="`gradient-$id`" gradientUnits="userSpaceOnUse">
<stop
v-for="(item, index) in gradientsColor"
:key="index"
:offset="item.offset"
:stop-color="item.color"
/>
</linearGradient>
<circle
:r="(width-radius)/2"
:cy="width/2"
:cx="width/2"
:stroke-width="radius"
:stroke="backgroundColor"
fill="none"
/>
<circle
v-if="gradientsColorShow"
ref="$bar"
:r="(width-radius)/2"
:cy="width/2"
:cx="width/2"
:stroke="gradientsColor ? `url(#gradient-$id)` : barColor"
:stroke-width="radius"
:stroke-linecap="isRound ? 'round' : 'square'"
:stroke-dasharray="(width-radius)*3.14"
:stroke-dashoffset="dashoffsetValue"
fill="none"
/>
</svg>
<div class="center_text">
<p v-if="!$slots.default" class="title">progress%</p>
<slot></slot>
</div>
</div>
</template>
<script>
// import _ from "lodash";
export default
props:
widthPresent:
type: Number,
default: 1
,
gradientsColor:
type: [Boolean, Array],
default: false
,
radius:
type: [Number, String],
default: 20
, // 进度条厚度
progress:
type: [Number, String],
default: 20
, // 进度条百分比
barColor:
type: String,
default: "#1890ff"
, // 进度条颜色
backgroundColor:
type: String,
default: "rgba(0,0,0,0.3)"
, // 背景颜色
isAnimation:
// 是否是动画效果
type: Boolean,
default: true
,
isRound:
// 是否是圆形画笔
type: Boolean,
default: true
,
id:
// 组件的id，多组件共存时使用
type: [String, Number],
default: 1
,
duration:
// 整个动画时长
type: [String, Number],
default: 1000
,
delay:
// 延迟多久执行
type: [String, Number],
default: 200
,
timeFunction:
// 动画缓动函数
type: String,
default: "cubic-bezier(0.99, 0.01, 0.22, 0.94)"
,
data()
return
width: 200,
idStr: "",
oldValue: 0
;
,
computed:
gradientsColorShow: function()
return true;
,
dashoffsetValue: function()
const isAnimation, width, radius, progress, oldValue = this;
return isAnimation
? ((width - radius) * 3.14 * (100 - oldValue)) / 100
: ((width - radius) * 3.14 * (100 - progress)) / 100;
,
watch:
id: function()
this.idStr = `circle_progress_keyframes_$this.id || 1`;
,
progress: function(newData, oldData)
if (newData !== oldData)
this.oldValue = oldData;
this.setAnimation();
,
mounted()
this.idStr = `circle_progress_keyframes_$this.id || 1`;
let self = this;
this.setCircleWidth();
this.setAnimation();
// 此处不能使用window.onresize
window.addEventListener("resize", function()
self.setCircleWidth();
self.setAnimation(self);
);
,
methods:
setCircleWidth()
const widthPresent = this;
this.$nextTick(() =>
let box = this.$refs.box;
let width = box.clientWidth * widthPresent;
let height = box.clientHeight * widthPresent;
let cW = width > height ? height : width;
this.width = cW;
)
,
setAnimation()
let self = this;
if (self.isAnimation)
// 重复定义判断
if (document.getElementById(self.idStr))
self.$refs.$bar.classList.remove(`circle_progress_bar$self.id`);
this.$nextTick(() =>
this.startAnimation();
);
,
startAnimation()
// 生成动画样式文件
let style = document.createElement("style");
style.id = this.idStr;
style.type = "text/css";
style.innerHTML = `
@keyframes circle_progress_keyframes_name_$this.id
from stroke-dashoffset: $((this.width - this.radius) *
3.14 *
(100 - this.oldValue)) /
100px;
to stroke-dashoffset: $((this.width - this.radius) *
3.14 *
(100 - this.progress)) /
100px;
.circle_progress_bar$
this.id
animation: circle_progress_keyframes_name_$this.id $
this.duration
ms $this.delayms $this.timeFunction forwards;`;
// 添加新样式文件
document.getElementsByTagName("head")[0].appendChild(style);
// 往svg元素中添加动画class
this.$refs.$bar.classList.add(`circle_progress_bar$this.id`);
;
</script>
<style scoped>
.content
height: 100%;
display: flex;
justify-content: center;
align-items: center;
.center_text
position: absolute;
font-size: 16px;
font-weight: bold;
</style>
自定义圆环形进度条实现(代码片段)
最近项目里边要用进度条，进度条中间展示进度，底部展示label，因为这个组件用的地方多，所以我就直接封装了一个通用组件。先看一下效果图：功能有：圆环的颜色和进度可以自定义；中间文字可... 查看详情
环形进度条组件(代码片段)
<template><divclass="content"ref="box"><svg:id="idStr"style="transform:rotate(-90deg)":width="width":height="width"xmlns="http://www.w3.org/2000/svg"><linearGradient:id="`gradient-$id... 查看详情
csssvg环形进度条-5(代码片段)
htmlsvg环形进度条-7(代码片段)
csssvg环形进度条-3。(代码片段)
htmlsvg环形进度条-4(代码片段)
htmlsvg环形进度条-2(代码片段)
htmlsvg环形进度条-1(代码片段)
自定义圆环形进度条实现(代码片段)
最近项目里边要用进度条，进度条中间展示进度，底部展示label，因为这个组件用的地方多，所以我就直接封装了一个通用组件。先看一下效果图：功能有：圆环的颜色和进度可以自定义；中间文字可... 查看详情
echarts实现环形进度条(代码片段)
效果图实现代码可直接复制运行：<!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title>环形进度条</title> <scriptsrc="https://cdn.staticfile.org/echart 查看详情
qt编写自定义控件14-环形进度条(代码片段)
前言环形进度条，用来展示当前进度，为了满足大屏UI的需要特意定制，以前有个叫圆环进度条，不能满足项目需要，只能重新定做，以前的进度间距不能自适应分辨率，而且当前进度对应的反的进度不能单独设置颜色，即当前... 查看详情
用svg实现一个环形进度条(代码片段)
svg实现环形进度条需要用到的知识：1、会使用path的d属性画一个圆环2、熟悉stroke,stroke-linecap,stroke-width,stroke-dasharray、stroke-dashoffset 话不多说，直接上代码<divstyle="width:200px;height:200px;"><svgviewBox="00100100">&l 查看详情
如何用svg写一个环形进度条以及动画(代码片段)
本次案例主要使用了svg的三个元素，分别为circle、text、path，关于svg的介绍大家可以看MDN上的相关教程，传送门由于svg可以写到HTML中，所以这里我们就可以很方便的做进度条加载动画啦，这次案例以vue来做数据交互svg的viewBoxviewB... 查看详情
delphi:圆形进度(环形进度)(代码片段)
起源：重回DC5项目，资源下载美工提供圆形进度条，复习Delphi，为实现其颇觉有趣，遂研究其。最终效果图如下： 实现：制作TCircleProgress控件，实现方法参照系统之TGauge控件，CSDN上tp机器猫一个源码，结合GDI+绘制技术实现... 查看详情
bootstrap进度条组件详解(代码片段)
Bootstrap进度条组件详解首先需要导入相关bootsrap的组件包：bootstrap.min.css、jquery.min.js、bootstrap.min.js等，这个就不多说了在网页中，进度条的效果并不少见，如：平分系统、加载状态等，进度条组件使用了css3的transition和animation属... 查看详情
高级组件——进度条jprogressbar(代码片段)
...minate(boolean);设置不确定性 false，确定的进度条（显示进度，常用）。 true，不确定的进度条（一般用来提示等待，不常用）。两种信息类型： pr 查看详情
进度条组件jprogressbar(代码片段)
...言： 在安装一个软件的时候经常会遇到进度条，进度条通常是用来显示一个操作的完成百分比，用户可以通过观察进度条得知目前操作进行何种程度。时间组件用于一段时间内依次做出程序员指定的操作。滑块... 查看详情
backgroundworker组件--进度条(代码片段)
代码：BackgroundWorkerbw=newBackgroundWorker();publicMainWindow()InitializeComponent();bw.WorkerReportsProgress=true;bw.WorkerSupportsCancellation=true;bw.DoWork+=bw_DoWork;bw.ProgressChange 查看详情