CSS实现的loading页面等待效果

来源：互联网发布：ios软件开发入门编辑：程序博客网时间：2024/05/19 23:16

有些页面加载起来比较慢，为了加强用户体验效果，所以一般都会做一个页面加载等待的提示，页面加载完成后消失。下面是用CSS实现的一个简单的页面加载等待效果，大家可以参考：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><style type="text/css">.loading{width:160px;height:56px;position: absolute;top:50%;left:50%;line-height:56px;color:#fff;padding-left:60px;font-size:15px;background: #000 url(images/loader.gif) no-repeat 10px 50%;opacity: 0.7;z-index:9999;-moz-border-radius:20px;-webkit-border-radius:20px;border-radius:20px;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);}</style></head><body><div id="loading" class="loading">Loading pages...</div></body></html>

css中的图片在下面：

整个效果图如下：