前端实现炫酷进度条插件

最近做到一个下载和导入的进度条效果，所以做了一个小插件，自己记录一下，然后分享一下
1、先看实现的效果

2、看实现的代码，样式的话我是根据UI出的图搞得，可以自行更改

<template><div class="progressbar"><div class="progressbar1"><div class="bar" :style="{ width: value1 }"></div><div class="label" :style="{ left: value1 }"><span></span>{{ value.toFixed(2) }}%</div></div></div>
</template><script>
export default {data() {return {value1: 0,};},props: ["value"],created() {},mounted() {},computed: {},watch: {},methods: {},watch: {value(newVal, oldVal) {this.value1 = newVal + "%";},},
};
</script><style scoped>
.progressbar {position: relative;display: block;width: 80%;height: 20px;padding: 10px 25px;border-radius: 16px;margin: 40px auto;-webkit-box-shadow: 0px 4px 4px -4px rgb(0 0 0 / 40%),0px -3px 3px -3px rgb(0 0 0 / 25%);box-shadow: 0px 4px 4px -4px rgb(0 0 0 / 40%),0px -3px 3px -3px rgb(0 0 0 / 25%);
}
.progressbar1 {position: absolute;display: block;content: "";width: calc(100% - 50px);height: 20px;top: 10px;left: 25px;border-radius: 20px;background: #dfdfdf;
}
.bar {position: absolute;display: block;width: 50%;height: 20px;top: 0;left: 0;background-color: #0077ffcc;border-radius: 20px;background-size: 3em 3em;background-image: linear-gradient(-45deg,transparent 0em,transparent 0.7em,#0077ff 0.9em,#0077ff 2.1em,transparent 2.1em,transparent 2.9em,#0077ff 3.1em);animation: ani 500ms infinite linear;-webkit-box-shadow: 0px 4px 4px -4px rgb(0 0 0 / 40%),0px -3px 3px -3px rgb(0 0 0 / 25%);box-shadow: 0px 4px 4px -4px rgb(0 0 0 / 40%),0px -3px 3px -3px rgb(0 0 0 / 25%);
}
@keyframes ani {0% {background-position: 0 0;
}
100% {background-position: 3em 0;
}
}.label {position: absolute;display: block;width: 70px;height: 30px;line-height: 30px;top: 30px;left: 0;background-color: #0077ff;transform: translateX(-35px);/* overflow: hidden; */font-size: 14px;border-radius: 5px;color: white;text-align: center;
}
.label span {display: block;width: 0;height: 0;border: 10px solid #0077ff;position: absolute;top: -20px;left: 25px;border-top: 10px solid rgba(21, 255, 0, 0);border-left: 10px solid rgba(0, 17, 255, 0);border-right: 10px solid rgba(255, 0, 242, 0);border-bottom: 10px solid #0077ff;
}
</style>

3、引入使用插件，这是我的文件目录

4、进度条.vue页面插件引入，这里为实现动态效果，用的定时器，模拟请求进度

<template><div class="root"><ProgressBar :value="value"></ProgressBar></div>
</template><script>
import ProgressBar from "../components/ProgressBar.vue";
export default {data() {return {value: 0,};},created() {},mounted() {let timer = setInterval(() => {if (this.value >= 100) {this.value =100;clearInterval(timer);} else {this.value += 0.1;}}, 10);},computed: {},components: { ProgressBar },watch: {},methods: {},
};
</script>

5、OK OK，到此结束，欢迎回复优化建议，共同提高

前端实现炫酷进度条插件相关推荐

android炫酷的自定义view,Android自定义View实现炫酷进度条
本文实例为大家分享了Android实现炫酷进度条的具体代码,供大家参考,具体内容如下下面我们来实现如下效果: 第一步:创建attrs文件夹,自定义属性: 第二步:自定义View: /** * Cre ...
android 炫酷进度条,Android打造炫酷进度条效果
本文实例为大家分享了Android炫酷进度条效果的具体代码,供大家参考,具体内容如下 HorizontalProgressbarWithProgress的代码 import android.conte ...
Android 自带描边颜色渐变炫酷进度条，面试必知必会
3. 画第三个圆角矩形作为进度条的最外层(进度层)盖在背景层之上 4. 描边层和背景层颜色可用纯色,进度层为了炫酷可用渐变色这是实现该自带描边颜色渐变进度条的原理,也是在PS中实现该效果的步骤,同样 ...
炫酷进度条：Android 仿应用宝下载进度条
2016-09-29 FlowLeaf 鸿洋鸿洋鸿洋微信号 hongyangAndroid 功能介绍你好,欢迎关注鸿洋的公众号,每天为您推送高质量文章,让你每天都能涨知识.点击历史消息,查看所 ...
Android 炫酷进度条
老规矩先看效果图 https://img-blog.csdnimg.cn/d7bde4cb436345d1bacb358e09e3259b.jpeg public class ProgressBar ...
Android 自带描边颜色渐变炫酷进度条
/** 外描边的宽度 */ private float BORDER_STROCK; /** 进度条进度矩形与控件边界的距离,≥BORDER_STROCK */ private float PROGR ...
jq画布插件_超炫HTML 5开发的jQuery进度条插件
今天我们分享一个超酷的使用HTML5画布技术开发的进度条插件 - percentageloader.这个插件比普通的水平进度条使用更加炫酷的效果,图形效果类似以前我们介绍的jQuery knob插件 ...
jQuery/CSS3炫酷动画效果插件 animate
jQuery是一款很强大的JavaScript框架,本文介绍的9个应用插件很多都是基于jQuery的,另外,CSS3的应用让这些插件增添了不少光彩,特别是第一个动画插件Animate.css非常实用, ...
get几个小技能：轮播图插件、进度条插件、筛选过滤插件
最近参加了一个网页设计大赛,趁这个机会做了一个个人简历的网页:点击欣赏用到了许多有趣的东西们今天分享一下. 轮播图插件 Swiper轮播图插件 Swiper 的结构和基础原理 Swiper 的每个展 ...

前端实现炫酷进度条插件

前端实现炫酷进度条插件相关推荐

最新文章

热门文章