页面加载过程中的加载动画效果

来源：互联网发布：java 必须加final 编辑：程序博客网时间：2024/04/28 07:36

抽空整的一个加载页面，记录一下。

<!DOCTYPE html><html><head><meta charset="UTF-8"><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>loading...</title><style type="text/css">html{height:100%;margin:0;}body{height:100%;margin:0;}.loading_all {height:100%;text-align: center;overflow:hidden;position:relative;}.loading_weiyi {position:absolute;width :120px;height:100px;top:30%;left:50%;vertical-align:middle;}.loading_imgtext {position:relative;left:-60px;}</style><script type="text/javascript">function changeLoadingMsg() {var baseMsg = "加载中";var maxGrow = 3var msgEl = document.getElementById("loadingMsg");if(!!msgEl) {var msg = msgEl.innerText;var grow = msg.length - baseMsg.length;if(grow < maxGrow) {msg = msg.concat(".");} else {msg = baseMsg.concat(".");}msgEl.innerText = msg;}}setInterval(changeLoadingMsg, 1000);</script></head><body><div class="loading_all"><div class="loading_weiyi"><div class="loading_imgtext"><img src="loading.gif"/><div id="loadingMsg">加载中...</div></div></div></div></body></html>

动画效果图loding.gif

0 0