<!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. 解决Tomcat无法加载css和js等静态资源文件

    解决思路有两个 一是,你使用了Apache服务器,html不交给Tomcat处理,所以你找不到Html等静态资源,所以你先停掉阿帕奇,然后只用Tomcat猫试试. 二是,像我一样,使用了Jetty开发 ...

  2. C/C++中的内存对齐 C/C++中的内存对齐

    一.什么是内存对齐.为什么需要内存对齐? 现代计算机中内存空间都是按照byte划分的,从理论上讲似乎对任何类型的变量的访问可以从任何地址开始,但实际情况是在访问特定类型变量的时候经常在特 定的内存地址 ...

  3. Android SmartImageView框架的简单实用

    特征:根据URL地址装载图像:支持装载通讯录中的图像:支持异步装载:支持缓存: 这个是作者的项目主页,有使用方法.http://loopj.com/android-smart-image-view/ ...

  4. leetcode面试准备:Decode Ways

    1 题目 A message containing letters from A-Z is being encoded to numbers using the following mapping: ...

  5. bzoj1009

    设f[i,j]为准考证号上第i位匹配到不吉祥数字第j位的方案数,显然j∈[0,m-1]下面我们就要想到怎么把f[i-1]转移到f[i]也就是当前匹配到第k位,那么下一位可能会匹配到哪一位显然我们可以穷 ...

  6. poj1935

    给定起点和要经过的点,求最短路径我发现,关于路径的treedp,设计的关键在于每个节点的状态怎么表示对于这道题,有一种常见的方法是令f[i,1]表示经过这个点且还要回来的路径,f[i,0]表示留在以i ...

  7. 前端程序员：月薪 5K 到 5 万，我干了啥

    高贵的前端程序猿们: 如何在前端开发这种高精尖的技术领域找到心仪的工作?实现在咖啡馆喝喝咖啡敲敲代码就能升职加薪.买房买车.迎娶白富美走上人生巅峰的职业梦想?这篇<进化论:从 0 到 100,前 ...

  8. Java基础（十一）常用类总结（一）

    这里有我之前上课总结的一些知识点以及代码大部分是老师讲的笔记 个人认为是非常好的,,也是比较经典的内容,真诚的希望这些对于那些想学习的人有所帮助! 由于代码是分模块的上传非常的不便.也比较多,讲的也是 ...

  9. android源码编译环境的准备及编译之后使用emulator运行的方法 - 官方版

    http://source.android.com/source/initializing.html http://blog.csdn.net/ithomer/article/details/6977 ...

  10. openStack opts