加载——水位上移效果

如下代码是一个加载过程的demo，通过水位上移表示进度情况的原理。也就是说，实现了加载过程中，水位上移表示加载的进度值增加的效果。

效果图

 

1、页面

 

<div class="circle">
	<img src="water.png">
	<span></span>
</div>

 

 

 

2、css

 

body{
	background-color: black;
}
.circle{
	left: 50%;
	margin-left: -100px;
	background-color: rgba(0%,80%,100%,0.5);
	width: 200px;
	height: 200px;
	border-radius: 50%;
	overflow: hidden;
	position: relative;
	top: 100px;
}
.circle>img{
	position: relative;
	left: 0;
	top: 100px;
}
.circle>span{
	width: 80px;
	position: absolute;
	left: 50%;
	top: 120px;
	margin-left: -40px;
	color: rgba(255,255,255,0.5);
	font-size: 50px;
	font-family: Gotham, "Helv