CSS实现的loading页面等待效果

来源：互联网发布：淘宝交保证金怎么交30 编辑：程序博客网时间：2024/05/17 15:38

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

[html] view plaincopy
<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中的图片在下面：

整个效果图如下：

0 0