<!DOCTYPE html>

<html>

<head>

<title>css实现页面加载中,请稍候效果</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

<meta http-equiv="description" content="this is my page">

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

</head>

<body>

    <div id="loadPage"

        style="display:none;position:absolute; left:-1px; top:1px; width:100%; height:100%;moz-opacity: 0.3;filter:Alpha(opacity=50); opacity: 0.3; background-color:#555; z-index:1000;">

        <img src="./images/06.gif" style="position: fixed;left: 48%;top:35%;"></img>

    </div>

</body>

</html>

默认是隐藏的，可通过js控制div的显示和隐藏，背景颜色和图片可自行调节。

css 实现页面加载中等待效果的更多相关文章

  1. 利用document的readyState去实现页面加载中的效果

    打开新的网页时,为了增强友好性体验,告知用户网页正在加载数据需要呈现一个"页面加载中"之类的提示,只需要利用document就可以实现. 实现示例代码如下: <style&g ...

  2. css实现加载中的效果

    那天闲着,学习了一下样式效果,自己实现了一个简单的加载中的效果 废话不多说,开始吧!! 一.实现一个圆环       要实现圆环,首先我们需要知道盒模型里面border的本质,先来看一个效果吧 从上面 ...

  3. 微信小程序：添加全局的正在加载中图标效果

    在发送请求的时候,显示一个正在加载中的小图标.在加载下一页的时候也显示正在加载中.同时数据请求回来了,把加载中进行关闭. 开发----API-----界面 在哪里添加这两段代码会比较方便呢?一个项目有 ...

  4. 页面加载时loading效果

    页面加载时loading效果: <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

  5. 页面加载中jquery逐渐消失效果实现

    为了获得更好的用户体验,现在大多数网页都会在页面中加一个加载中效果,这里实现一个加载中逐渐消失的效果,以至于看上去不那么生硬. html: <div id="loading" ...

  6. css3 linear-gradient实现页面加载进度条效果

    最终效果图: html结构: <div>    <p class="p1">        <span></span>    < ...

  7. 利用css实现页面加载时旋转动画

    有时浏览一些网站时在刚加载页面时候会出现一个滚动动画如下图,特别是对于一些移动端的站点或者混合应用来说应该用户体验会好很多,扒了下页面发现是用css样式控制的,于是把页面以及css样式赋值了下来, h ...

  8. ajax 异步加载显示等待效果

    css: #loading { width:170px; height:25px; border:3px solid #C3DAF9; position:absolute; top:300px; le ...

  9. Android 三种方式实现自定义圆形页面加载中效果的进度条

    转载:http://www.eoeandroid.com/forum.php?mod=viewthread&tid=76872 一.通过动画实现 定义res/anim/loading.xml如 ...

随机推荐

  1. bzoj 1040: [ZJOI2008]骑士 環套樹DP

    1040: [ZJOI2008]骑士 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 1755  Solved: 690[Submit][Status] ...

  2. 【HDU3081】Marriage Match II （二分+最大流）

    Description Presumably, you all have known the question of stable marriage match. A girl will choose ...

  3. 【uva10917】Walk Through the Forest （最短路）

    题目: gbn最近打算穿过一个森林,但是他比较傲娇,于是他决定只走一些特殊的道路,他打算只沿着满足如下条件的(A,B)道路走:存在一条从B出发回家的路,比所有从A出发回家的路径都短.你的任务是计算一共 ...

  4. c# 函数练习；结构体、枚举类型

       * 结构体 1.就是一个自定义的集合,里面可以放各种类型的元素,用法大体跟集合一样. 注意:枚举类型和结构体都属于值类型. 2.定义的方法: struct student { public in ...

  5. VC6.0 list sort出错

    在STL中,排序是个很重要的话题. 1.algorithm 里的sort()只接收RandomAccessIterator用于像vector,dequeue的排序 2.像set,map,这种关联式容器 ...

  6. 【HDOJ】3696 Farm Game

    SPFA求最短路径.见图的时候注意逆向建图. /* 3696 */ #include <iostream> #include <queue> #include <vect ...

  7. bzoj1236

    其实这道题目不难,主要要求我们有一个清晰地思路首先可以按位数讨论,这里我把1~9单独讨论了因为除了1位数,每个位数开头的数的开头数字1前面都是-号然后考虑位数的奇偶性当位数为奇数的时候比较简单举个例子 ...

  8. bzoj1297

    首先学习是学习矩阵乘法在邻接矩阵的应用ab两点经过k条边的路径数就等于图的邻接矩阵G的k次幂之后G[a,b]的值但这道题问的是经过长度为k的路径数考虑到每条边的长度最长只有9,所以我们把一个点拆成9个 ...

  9. 大型系统OA--需求

    1.面向普通用户 普通用户一般都是公司的小职员,上OA都干什么呢?当然是获取信息咯.还有最好很多事儿,不需要跟公司的其他部门的人儿,打交道,直接在网上解决就好了. 收发邮件: 查看自己发动的流程,也就 ...

  10. dede织梦跨频道调用指定栏目文章的解决方法

    很久没有写技术类的文章了,这次这个标题写的- 呃, 有一点儿纠结. 事情是这样的,刚刚回答了一个百度问答上的问题,这个问题的大体意思是,有一个图片栏目,内含3个子栏目,分别为图片栏目1.2和3,另有三 ...