/*
 * 自定义下拉刷新和上拉加载的结构
 * 
	//下拉刷新区域
	<div class="mescroll-downwarp">
		<div class="downwarp-content">
			<p class="downwarp-slogan">让购物更便捷</p>
			<p class="downwarp-text">下拉更新...</p>
			<div class="downwarp-progress">
				<img class="downwarp-man" src="img/mescroll-progress1.png"/>
				<img class="downwarp-box" src="img/mescroll-progress0.png"/>
			</div>
			<div class="downwarp-loading"></div>
		</div>
	</div>

	//上拉加载区域
	<div class="mescroll-upwarp">
		//加载中..
		<div class="upwarp-progress"><div class="upwarp-loading mescroll-rotate"></div></div><p class="upwarp-tip">加载中..</p>
		//无数据
		<p class="upwarp-nodata">没有了哦~</p>
	</div>
 */

/*下拉刷新--内容区,定位于区域底部*/
.mescroll-downwarp .downwarp-content{
	height: 75px;
	padding-bottom: 0;
}
/*下拉刷新--标语*/
.mescroll-downwarp .downwarp-slogan{
	padding: 16px 0 0 18px;
	font-size: 13px;
	color: gray;
}
/*下拉刷新--进度提示*/
.mescroll-downwarp .downwarp-text{
	font-size: 11px;
	color: darkgray;
}
/*下拉刷新--向下进度动画*/
.mescroll-downwarp .downwarp-progress{
	position: absolute;
	top: 0;
	left: 50%;
	width: auto;
	height: auto;
    border: none;
    border-radius: 0;
    margin-right: 0;
    margin-left: -90px;
}
/*下拉刷新--人*/
.mescroll-downwarp .downwarp-man{
	width: 50px;
	vertical-align: middle;
	-webkit-transform-origin: left 60%;
	transform-origin: left bottom;
}
/*下拉刷新--盒子*/
.mescroll-downwarp .downwarp-box{
	width: 18px;
	margin-top: 10px;
	margin-left: -20px;
	vertical-align: middle;
	-webkit-transform-origin: right -100%;
	transform-origin: right -100%;
}
/*下拉刷新--进度条*/
.mescroll-downwarp .downwarp-loading{
	/*display: none; 不预先隐藏,避免首次显示动画时,图片没及时加载完毕导致短暂的白屏*/
	position: absolute;
	top: 0;
	left: 50%;
	margin-left: -88px;
	width: 50px;
	height: 70px;
	background-size: contain;
	background-repeat: no-repeat;
	-webkit-animation: animManRun .3s steps(1,start) infinite;
	animation: animManRun .3s steps(1,start) infinite;
}
@-webkit-keyframes animManRun {
	0% {background-image: url(mescroll-progress2.png)}
	40% {background-image: url(mescroll-progress3.png)}
	70% {background-image: url(mescroll-progress4.png)}
	100% {background-image: url(mescroll-progress2.png)}
}

.mescroll-downwarp .downwarp-loading:before{
	position: absolute;
	top: 15px;
	left: 50%;
	margin-left: -60px;
	content: '';
	width: 40px;
	height: 70px;
	background-size: contain;
	background-repeat: no-repeat;
	background-image: url(mescroll-progress5.png);
}

/*上拉加载--进度条*/
.mescroll-upwarp .upwarp-progress{
	display: inline-block;
	width: 22px;
	height: 22px;
	border: none;
    background-image: url(mescroll-loading2.png);
    background-size: contain;
}
.mescroll-upwarp .upwarp-loading{
	display: inline-block;
	width: 22px;
	height: 22px;
    background-image: url(mescroll-loading1.png);
    background-size: contain;
}