1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>头部进度条</title>
  6.   <style type="text/css">
  7.     .loading{
  8.       width: %;
  9.       height: %;
  10.       position: fixed;
  11.       top:;
  12.       z-index: ;
  13.       background: #FFFFFF;
  14.     }
  15.     .loading .pic{
  16.       height: 5px;
  17.       position: absolute;
  18.       top:;
  19.       left:;
  20.       background: #F33;
  21.     }
  22.   </style>
  23.   <script src="../js/jquery-3.2.1.js"></script>
  24.  
  25. </head>
  26. <body>
  27. <div class="loading">
  28.   <div class="pic"></div>
  29. </div>
  30. <header>
  31.  <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=4174868146,2956166581&fm=26&gp=0.jpg">
  32.   <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2976427166,2178524819&fm=26&gp=0.jpg">
  33. </header>
  34. <script type="text/javascript">
  35.   $(".loading .pic").animate({width:"10%"},)
  36. </script>
  37. <section class="banner">
  38.   <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1203727489,1880869354&fm=26&gp=0.jpg">
  39.   <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2227804654,860253351&fm=26&gp=0.jpg">
  40. </section>
  41. <script type="text/javascript">
  42.   $(".loading .pic").animate({width:"30%"},)
  43. </script>
  44. <section class="about">
  45.   <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3848479042,2603873849&fm=26&gp=0.jpg">
  46.   <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1223109904,763334928&fm=26&gp=0.jpg">
  47. </section>
  48. <script type="text/javascript">
  49.   $(".loading .pic").animate({width:"50%"},)
  50. </script>
  51. <section class="pro">
  52.   <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3280010440,2340064&fm=26&gp=0.jpg">
  53. </section>
  54. <script type="text/javascript">
  55.   $(".loading .pic").animate({width:"80%"},)
  56. </script>
  57. <section class="news">
  58.   <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2687972484,527558523&fm=26&gp=0.jpg">
  59. </section>
  60. <script type="text/javascript">
  61.   $(".loading .pic").animate({width:"95%"},)
  62. </script>
  63. <footer>
  64.   <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1173737556,2699518622&fm=26&gp=0.jpg">
  65. </footer>
  66. <script type="text/javascript">
  67.   $(".loading .pic").animate({width:"100%"},,function () {
  68.     $(".loading").fadeOut();
  69.   })
  70. </script>
  71. </body>
  72. </html>

【CSS系列】网页头部进度条方式一的更多相关文章

  1. CSS在网页中应用的方式_嵌入式

    内联式样式表:直接写在现有的标记中,比如: 复制代码 代码如下: <p style="font-size:24px;">www.phpstudy.net</p&g ...

  2. iOS-仿支付宝加载web网页添加进度条

    代码地址如下:http://www.demodashi.com/demo/11727.html 目前市场上APP常会嵌入不少的h5页面,参照支付宝显示web页面的方式, 做了一个导航栏下的加载进度条. ...

  3. nprogress.js 头部进度条使用方法

    nprogress.js 头部进度条 引入CSS\JS <link rel="stylesheet" type="text/css" href=" ...

  4. Android -- 真正的 高仿微信 打开网页的进度条效果

    (本博客为原创,http://www.cnblogs.com/linguanh/) 目录: 一,为什么说是真正的高仿? 二,为什么要搞缓慢效果? 三,我的实现思路 四,代码,内含注释 五,使用方法与截 ...

  5. 模仿也是提高，纯css小技巧实现头部进度条

    刚开始的时候我也觉得不可能,但是就是这么神奇,总有大神给你意想不到的惊喜. 快来感受一下把.(仔细看看头部黄色条的变化) 思考一下啊,怎么出现的那,其实作者使用了一点小技巧,那就是背景色渐变和遮挡产生 ...

  6. HTML5 CSS3 诱人的实例 ： 网页载入进度条的实现，下载进度条等

    今天给大家带来一个比較炫的进度条,进度条在一耗时操作上给用户一个比較好的体验,不会让用户认为在盲目等待,对于没有进度条的长时间等待,用户会任务死机了,毫不犹豫的关掉应用:一般用于下载任务,删除大量任务 ...

  7. Qt自定义控件系列(一) --- 圆形进度条

    本系列主要使用Qt painter来实现一些基础控件.主要是对平时自行编写的一些自定义控件的总结. 为了简洁.低耦合,我们尽量不使用图片,qrc,ui等文件,而只使用c++的.h和.cpp文件. 由于 ...

  8. JS网页顶部进度条demo

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  9. 网页载入进度条中的javascript

    demo地址:http://output.jsbin.com/buquyedosa 思路例如以下:代码都有凝视,就不一一介绍了. <!DOCTYPE html> <html> ...

随机推荐

  1. wapp HTTP Error 404. The requested resource is not found.

    原因: 本地80端口被占用,需要修改WAMP的默认端口 修改设置: 找到 bin/apache/apache***/conf/httpd.conf文件 将文件中的80修改为8088 修改这两个地方端口 ...

  2. 植物 miRNA 研究

    相比动物miRNA 而言, 植物miRNA 的研究相对较少. 植物miRNA 相比动物miRNA , 有以下特点: 1) 植物miRNA 的长度为 21 nt 左右, 动物miRNA 长度在 22 ~ ...

  3. Java之ReentrantLock公平锁和非公平锁

    在Java的ReentrantLock构造函数中提供了两种锁:创建公平锁和非公平锁(默认).代码如下: public ReentrantLock() { sync = new NonfairSync( ...

  4. Drools 语法

    Drools 语法 规则语法 package: package 的名字是随意的,不必必须对应物理路径 import: 导入外部变量 规则的编译与运行要通过Drools 提供的各种API 来实现.API ...

  5. mysql 找不到或无法加载已注册的 .Net Framework Data Provider和Unable to find the requested .Net Framework Data Provider. It may not be installed解决

    需要安装 mysql-connector-net-6.7.4.msi 在C盘安装mysql的位置找到三个DLL,复制到Bin文件夹下 在Web.config文件中添加对应配置: <system. ...

  6. 百度编辑器插入视频、iframe 失败

    插入失败是因为编辑器的xssFilter过滤,导致插入出现异常 文件位置:ueditor.config.js ,大概在428行加上 video: ['autoplay', 'controls', 'l ...

  7. Loadrunner对https协议（单双向SSL）的web端性能测试

    1.项目背景 1.1 单双向SSL的含义及部署 单向SSL即我们说到的https协议. 特点是,浏览器需要请求验证服务器证书: 基本含义是:一个安全通信通道,它基于HTTP开发,用于在客户计算机和服务 ...

  8. MongoDB数据直接转移

    本方法较为暴力,有待验证,重要资料切勿使用.... 1.把一台电脑上MongoDB的--dbpath 下的文件夹  直接复制过来,放在新设备上 2.写个可爱的批处理文件 其实,就是改了个--dbpat ...

  9. ubuntu-12.04.5-desktop-i386.iso：ubuntu-12.04.5-desktop-i386：安装Oracle11gR2

    ubuntu 桌面版的安装不介绍. 如何安装oracle:核心步骤和关键点. ln -sf /bin/bash /bin/sh ln -sf /usr/bin/basename /bin/basena ...

  10. consul在windows下的安装

    consul的下载 https://www.consul.io/downloads.html 选择对应的系统版本 修改环境变量path 启动命令窗口 执行命令 consul agent -dev 打开 ...