一、效果演示及使用

作为组件引入到项目（引入地址修改为自己实际的存放地址），注册到components

import stripeloading from "@/components/LSUI/loading/stripeloading";

components: {

stripeloading

},

使用组件

      <stripeloading:width="300":height="40":process="60"process-color1="pink"process-color2="white":stripe-spacing="50":process-speed="5":stripe-speed="5"/>

通过对提供的参数修改，可以一定程度地自定义进度条样式

      <stripeloading:width="400":height="100":process="process"process-color1="orange"process-color2="white":stripe-spacing="80":process-speed="8":stripe-speed="10"/>

提供使用的参数如下

props: {//进度条宽度width: {type: Number,default: 300,},//进度条高度height: {type: Number,default: 40,},//进度(1-100)process: {type: Number,default: 0,},//进度条颜色1processColor1: {type: String,default: "pink",},//进度条颜色2processColor2: {type: String,default: "white",},//条纹间距stripeSpacing: {type: Number,default: 50,},//进度条移动速度processSpeed: {type: Number,default: 5,},//条纹移动速度stripeSpeed: {type: Number,default: 5,},},

二、组件源码

<!--LSUI>条纹进度条-->
<template><div><div:style="{width: `${bdW}px`,height: `${bdH}px`,border: `${bdL}px solid ${bdColor}`,borderRadius: `${bdBorderRadius}px`,background: bdbgColor,}"class="border"><div:style="{width: `${contentW}%`,height: '100%',borderRadius: `${contentBorderRadius}px`,transition: `${processMoveTime}s`,paddingLeft: `-${bdL + 10}px`,}"class="content"><div:style="{width: `${contentInW}px`,height: '100%',background: contentColorGroup,backgroundSize: `${contentSpacing}px ${contentSpacing}px`,transform: `translate(-${contentInW / 3}px, 0)`,animationDuration: `${processBgMoveTime}s`,}"class="content_in"/></div></div></div>
</template><script>
export default {name: "stripeloading",props: {//进度条宽度width: {type: Number,default: 300,},//进度条高度height: {type: Number,default: 40,},//进度(1-100)process: {type: Number,default: 0,},//进度条颜色1processColor1: {type: String,default: "pink",},//进度条颜色2processColor2: {type: String,default: "white",},//条纹间距stripeSpacing: {type: Number,default: 50,},//进度条移动速度processSpeed: {type: Number,default: 5,},//条纹移动速度stripeSpeed: {type: Number,default: 5,},},components: {},data() {return {bdW: 300, //边框宽度bdH: 40, //边框高度bdL: 10, //边框厚度bdColor: "#ccc", //边框颜色bdbgColor: "#eee", //边框背景颜色contentW: 4, //内容宽度contentColor1: "pink", //内容颜色1contentColor2: "white", //内容颜色2contentSpacing: 50, //条纹间距processMoveTime: 3, //进度条移动时长processBgMoveTime: 5, //进度条背景移动时长};},computed: {//边框弧度bdBorderRadius() {return this.bdH / 2;},//内容弧度contentBorderRadius() {return (this.bdH - 2 * this.bdL) / 2;},//内容斜条纹contentColorGroup() {let bgStyle ="linear-gradient(45deg," +this.contentColor1 +" 25%," +this.contentColor2 +" 0%," +this.contentColor2 +" 50%," +this.contentColor1 +" 0%," +this.contentColor1 +" 75%," +this.contentColor2 +" 0%" +")";return bgStyle;},contentInW() {let contentInMinW =Math.ceil(this.bdW / this.contentSpacing) * this.contentSpacing;return Math.max(this.contentSpacing, contentInMinW) * 3;},},watch: {process: {handler(val, oldVal) {this.contentW = Math.min(val, 100);},deep: true,immediate: true,},},created() {this.init();},methods: {init() {this.bdW = this.width;this.bdH = this.height;this.contentW = Math.min(this.process, 100);this.contentColor1 = this.processColor1;this.contentColor2 = this.processColor2;this.contentSpacing = this.stripeSpacing;this.processMoveTime = 15 / this.processSpeed;this.processBgMoveTime = 25 / this.stripeSpeed;},},
};
</script><style rel="stylesheet/scss" lang="scss" scoped>
.border {overflow: hidden;
}
.content {overflow: hidden;
}
.content_in {animation-name: move;animation-timing-function: linear;animation-iteration-count: infinite;
}
@keyframes move {100% {transform: translate(0px, 0);}
}
</style>

【Vue】条纹进度条相关推荐

vue中进度条写法_vue组件实现进度条效果
这篇文章主要为大家详细介绍了vue组件实现进度条效果,具有一定的参考价值,可以用来参考一下. 感兴趣的小伙伴,下面一起跟随512笔记的小编两巴掌来看看吧! 本文实例为大家分享了vue实现进度条效果的具 ...
Bootstrap条纹进度条
条纹进度条只需给进度条的容器元素追加一个 .progress-bar-striped 类,就可以创建出带条纹的进度条.并且,这种进度条还能根据进度条的颜色,自动显示不同的条纹颜色: <div ...
Bootstrap 条纹进度条
条纹进度条只需给进度条的容器元素追加一个 .progress-striped 类,就可以创建出带条纹的进度条,并且不同颜色的进度条,可以显示不同的条纹: <div class="pr ...
利用 element ui 进度条实现渐变条纹进度条
首先我们看下需要完成的效果首先可以看到是一个有白色条纹,以及一个渐变色的条纹的进度条第一部分呢我们可以先写出这个白色的条纹我们可以利用以下代码实现白色条纹 .el-progress-bar_ ...
android 动态改变进度条,Android条纹进度条的实现(调整view宽度仿进度条)
Android条纹进度条的实现(调整view宽度仿进度条) 发布时间:2020-10-03 16:14:24 来源:脚本之家阅读:89 作者:RustFisher 前言本文主要给大家介绍了关于An ...
vue 环形进度条组件封装
子组件circle: <template><div :style="svgStyle"><svg :style="svgStyle" ...
vue aplayer 进度条无法拖动_为 Vue 的惰性加载加一个进度条
// 每日前端夜话第412篇// 正文共:1800 字// 预计阅读时间:8 分钟简介通常用 Vue.js 编写单页应用(SPA)时,当加载页面时,所有必需的资源(如 JavaScript 和 ...
vue实现进度条隐藏_Vue 中使用 NProgress 实现进度条
简介:NProgress 是浏览器加载时,出现在浏览器顶部的进度条. 文章目录: 一.NProgress 安装二.NProgress 使用三.NProgress 配置四.Vue 中修改进度条颜色 ...
Bootstrap中的条纹进度条使用案例
创建一个条纹的进度条的步骤如下: 1.添加一个带有 class .progress 和 .progress-striped 的 <div> 2.接着在上面的 <div> 内, ...

【Vue】条纹进度条

一、效果演示及使用

二、组件源码

【Vue】条纹进度条相关推荐

最新文章

热门文章