项目中遇到的,用vue实现下:

 <template>
<div class="plLoading">
<div class="plLoadingContent">
<div class="plLoadingLogo">
<img src="http://static.crecgec.com/Kaipiao/loadingLogo.png"/>
</div>
<div class="plLoadingCon">
<div class="plLoadingShow" ref="plLoadingShow" :style="{width: plsStyleWidth}"></div>
<div class="plLoCir" ref="plLoCir" :style="{left: plcStyleLeft}" v-show="plcShow"></div>
</div>
<div class="plLoadingNum" ref="plLoadingNum">%</div>
</div>
<!--测试用的,使用的时候,在父组件创建一个隐藏的Ddiv,里面放入这个页面用到的所有img-->
<div class="imgsHidden displayNone">
<img class="hImg" src="http://static.crecgec.com/Kaipiao/countDownTitle.png">
<img class="hImg" src="http://static.crecgec.com/Kaipiao/countDown.png">
<img class="hImg" src="http://static.crecgec.com/Kaipiao/countDown1.png">
<img class="bImg" src="http://static.crecgec.com/Kaipiao/background.png">
<img class="hImg" src="http://static.crecgec.com/Kaipiao/loadingLogo.png">
</div>
</div>
</template> <script type="text/ecmascript-6">
import $ from 'jquery' export default {
props: {
eleH: {
type: String,
default: 'hImg'
},
eleB: {
type: String,
default: 'bImg'
},
dataIsOk: {
type: Boolean,
default: false
}
},
data () {
return {
plsStyleWidth: , // plLoadingShow的初始width
plcStyleLeft: , // plLoCir的初始left值
plcShow: true, // plLoCir初始是显示状态
backImgLoading: false, // 背景图片是否加载成功(40)
otherImgLoading: false, // 头部、底部图片加载成功(40)
dataLoading: '', // 后台返回的数据加载成功(20)
lodingWidth: ,
otherImgLength: ,
otherNum: ,
backImgLength: ,
backNum:
}
},
watch: {
// 整个也没被分为三部分:背景图、其他图片、数据
// 监控otherImgLoading,(其他图片加载成功),this.lodingWidth增加40
otherImgLoading () {
this.lodingWidth = this.lodingWidth +
},
// 监控otherImgLoading,(背景图片加载成功),this.lodingWidth增加40
backImgLoading () {
this.lodingWidth = this.lodingWidth +
},
// 监控dataIsOk,(数据加载成功,这个有父组件传递过来),this.lodingWidth增加20
dataIsOk () {
if (this.dataIsOk) {
this.lodingWidth = this.lodingWidth +
}
},
// 监控lodingWidth的值
lodingWidth () {
if (this.lodingWidth <= ) {
this.setLoadingWidthTimer(this.lodingWidth)
}
},
// 监控plcStyleLeft(圆球的left值),如果值为484px(自己设置的),表明圆球到了最右边
// 圆球隐藏
plcStyleLeft () {
if (this.plcStyleLeft === '484px') {
setTimeout(() => {
this.plcShow = false
this.hasScroll()
this.$emit('tipShow', {loadingIsShow: false})
}, )
}
}
},
mounted () {
this.isOtherImgLoading(this.eleH)
this.isBackImgLoading(this.eleB)
this.noScroll()
},
methods: {
// 设置width、left
setLoadingWidthTimer (newPllsWidth) {
if (newPllsWidth <= ) {
setTimeout(() => {
this.plsStyleWidth = ( * newPllsWidth / ) + 'px'
this.plcStyleLeft = ( * newPllsWidth / ) + 'px'
this.$refs.plLoadingNum.innerHTML = newPllsWidth + '%'
}, )
} else if (newPllsWidth <= ) {
setTimeout(() => {
this.plsStyleWidth = ( * newPllsWidth / ) + 'px'
this.plcStyleLeft = ( * newPllsWidth / ) + 'px'
this.$refs.plLoadingNum.innerHTML = newPllsWidth + '%'
}, )
} else {
setTimeout(() => {
this.plsStyleWidth = ( * newPllsWidth / ) + 'px'
this.plcStyleLeft = ( * newPllsWidth / ) + 'px'
this.$refs.plLoadingNum.innerHTML = newPllsWidth + '%'
}, )
}
},
// 弹出层显示的时候,没有滚动条
noScroll () {
document.body.style.cssText = 'overflow:hidden;'
},
// 弹出层消失后,滚动条显示
hasScroll () {
document.body.style.cssText = 'overflow:auto;'
},
isOtherImgLoading (ele) {
this.otherImgLength = $('.' + ele).length
let _this = this
if (this.otherImgLength > ) {
$('.' + ele).each(function () {
$(this).on('load', function () {
_this.otherNum = _this.otherNum +
if (_this.otherImgLength === _this.otherNum) {
_this.otherImgLoading = true
}
})
})
} else {
this.otherImgLoading = true
}
},
isBackImgLoading (ele) {
this.backImgLength = $('.' + ele).length
let _this = this
if (this.backImgLength > ) {
$('.' + ele).each(function () {
$(this).on('load', function () {
_this.backNum = _this.backNum +
if (_this.backImgLength === _this.backNum) {
_this.backImgLoading = true
}
})
})
} else {
this.backImgLoading = true
}
}
}
}
</script> <style>
.plLoading{
width: %;
height: %;
position: absolute;
left: ;
top: ;
z-index: ;
background-color: #00101d;
}
.plLoadingContent{
width: 500px;
height: 220px;
position: absolute;
margin: auto;
top: %;
left: %;
margin-top: -110px;
margin-left: -250px;
}
.plLoadingLogo{
height: 60px;
}
.plLoadingCon{
width: 500px;
height: 16px;
margin-top: 100px;
border-radius: 8px;
background-color: #;
}
.plLoadingShow{
transition: width .5s;
height: 16px;
border-radius: 8px;
background-color: #0062b2;
position: absolute;
}
.plLoCir{
transition: left .5s;
position: absolute;
width: 16px;
height: 16px;
border-radius: 8px;
background-color: #0062b2;
box-shadow: 20px #008cff;
}
.plLoadingNum{
font-size: 14px;
color: #0062b2;
margin-top: 20px;
}
.displayNone{
display: none;
}
</style>

Vue 实现loading进度条的更多相关文章

  1. Android loading进度条使用简单总结

    在这里,总结一下loading进度条的使用简单总结一下. 一.说起进度条,必须说说条形进度条,经常都会使用到嘛,特别是下载文件进度等等,还有像腾讯QQ安装进度条一样,有个进度总给人良好的用户体验. 先 ...

  2. JavaScript之Loading进度条

    一个loading进度条,定义一个fakeProgress方法,定位一个URL,然后setTimeout设置跳转时间我们就能看到我们要打开的URL网址了. 这个链接我就直接链接到我的新浪博客去了,算是 ...

  3. ASP.NET 给Web中的网页添加Loading进度条形式

    前段时间客户提了一个需求,要求给网站中某些功能添加进度条形式,因为某些功能查询的数据量太大,经常会出现点击Search按钮,但是没有任何反应的情况,会让用户以为网站挂掉了,导致投诉的事情发生,所以客户 ...

  4. 模态框的理解 ,jQ: loading,进度条, 省级联动 表单验证 插件

    模态框: 打开一个弹框 不关闭它就不能做框外的操作 必须关闭或弹出另外的弹框 加载延迟loading + 进度条只要有请求 就处理一下监控ajax 全局事件jquery: $('#box').ajax ...

  5. Unity3d中制作异步Loading进度条所遇到的问题

    背景 通常游戏的主场景包括的资源较多,这会导致载入场景的时间较长.为了避免这个问题,能够首先载入Loading场景.然后再通过Loading场景来载入主场景. 由于Loading场景包括的资源较少,所 ...

  6. vue轻量进度条

    **### vue------ mode 好玩东西+1: 轻量级进度条: 1.引入 import NProgress from 'nprogress'; // progress bar import ...

  7. spin.js无图片实现loading进度条,支持但非依赖jquery

    特点: 1.无图片,无外部CSS 2.无依赖(支持jQuery,但非必须) 3.高度可配置 4.分辨率无关 5.旧版本IE不支持时,采用VML支持 6.使用关键帧动画,采用setTimeout() 7 ...

  8. unity3d___UGui中如何创建loading...进度条

    http://blog.sina.com.cn/s/blog_e82e8c390102wh2z.html 实现方法:通过Image组件中Image Type属性中Fill Amount,通过代码改变F ...

  9. Vue/React圆环进度条

    数据展示,一直是各行各业乐此不疲的需求,具体到前端开发行业,则是各种各种图表数据展示,各种表格数据展示,烦不胜烦(繁不胜繁)! 前几天刚做了折线图.柱状图.饼状图之类的图表数据展示效果,今天又碰到了类 ...

随机推荐

  1. 单点登录(十五)-----实战-----cas4.2.x登录mongodb验证方式实现自定义加密

    我们在前一篇文章中实现了cas4.2.x登录使用mongodb验证方式. 单点登录(十三)-----实战-----cas4.2.X登录启用mongodb验证方式完整流程 也学习参考了cas5.0.x版 ...

  2. Windows + Ubuntu下JDK与adb/android环境变量配置完整教程

    假设JDK和android sdk路径分别如下: D:\Program Files\Java\jdkD:\android-sdk 1.JDK环境变量配置JAVA_HOME=D:\Program Fil ...

  3. android.database.CursorIndexOutOfBoundsException:Index -1 requested, with a size of 1(zz)

    android.database.CursorIndexOutOfBoundsException:Index -1 requested, with a size of 1 http://blog.cs ...

  4. 北京联通IPTV 数码视讯 Q1 破解过程

    1. 买个usb转ttl的线,我买的是ch340g,3.8元包邮,店家貌似叫telesky,不重要,买到这货就行,里面有送杜邦线 2. 电脑上安装ch340g驱动,注意不要安装错了,注意电压的设置保持 ...

  5. SSH框架搭建问题总结

    1.eclipse中tomcat配置是否正确?能否在网页中访问的到? 如何在eclipse中配置tomcat就不说了,我们看下问题,在网页上访问tomcat的地址,为什么出现404错误呢? 解决办法: ...

  6. 设计模式之单例模式实现(C++)

    #ifndef SINGLETON_H #define SINGLETON_H #include <cassert> #include <memory> #include &l ...

  7. python学习(23)requests库爬取猫眼电影排行信息

    本文介绍如何结合前面讲解的基本知识,采用requests,正则表达式,cookies结合起来,做一次实战,抓取猫眼电影排名信息. 用requests写一个基本的爬虫 排行信息大致如下图 网址链接为ht ...

  8. Rsync实现文件同步的算法(转载)

    Rsync文件同步的核心算法 文章出处:http://coolshell.cn/articles/7425.html#more-7425 rsync是unix/linux下同步文件的一个高效算法,它能 ...

  9. solr基础使用概述

    概述:solr 作为搜索引擎系统,它应该包含两部分内容,分别是:索引系统 和 搜索系统. 索引系统 它主要负责将外部不同数据源的数据转换为 solr 格式规范的数据格式(我们称之为:SolrInput ...

  10. caffe 配置文件详解

    主要是遇坑了,要记录一下. solver算是caffe的核心的核心,它协调着整个模型的运作.caffe程序运行必带的一个参数就是solver配置文件.运行代码一般为 # caffe train --s ...