有些页面加载起来比较慢,为了加强用户体验效果,所以一般都会做一个页面加载等待的提示,页面加载完成后消失。下面是用CSS实现的一个简单的页面加载等待效果,大家可以参考:
- <span style="font-size:18px;"><!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></span>
css中的图片在下面:
整个效果图如下: