CSS实现的loading页面等待效果

最新推荐文章于 2022-12-06 17:58:57 发布

zhengbo0

最新推荐文章于 2022-12-06 17:58:57 发布

阅读量3.5k

点赞数

分类专栏： html+css

html+css 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

有些页面加载起来比较慢，为了加强用户体验效果，所以一般都会做一个页面加载等待的提示，页面加载完成后消失。下面是用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中的图片在下面：

整个效果图如下：

zhengbo0

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS实现的loading页面等待效果

有些页面加载起来比较慢，为了加强用户体验效果，所以一般都会做一个页面加载等待的提示，页面加载完成后消失。下面是用CSS实现的一个简单的页面加载等待效果，大家可以参考：[html] view plaincopyspan style="font-size:18px;">> html> head> meta http-equiv="Con
复制链接

扫一扫