<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>头部进度条</title>

  <style type="text/css">

    .loading{

      width: %;

      height: %;

      position: fixed;

      top:;

      z-index: ;

      background: #FFFFFF;

    }

    .loading .pic{

      height: 5px;

      position: absolute;

      top:;

      left:;

      background: #F33;

    }

  </style>

  <script src="../js/jquery-3.2.1.js"></script>

</head>

<body>

<div class="loading">

  <div class="pic"></div>

</div>

<header>

 <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=4174868146,2956166581&fm=26&gp=0.jpg">

  <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2976427166,2178524819&fm=26&gp=0.jpg">

</header>

<script type="text/javascript">

  $(".loading .pic").animate({width:"10%"},)

</script>

<section class="banner">

  <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1203727489,1880869354&fm=26&gp=0.jpg">

  <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2227804654,860253351&fm=26&gp=0.jpg">

</section>

<script type="text/javascript">

  $(".loading .pic").animate({width:"30%"},)

</script>

<section class="about">

  <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3848479042,2603873849&fm=26&gp=0.jpg">

  <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1223109904,763334928&fm=26&gp=0.jpg">

</section>

<script type="text/javascript">

  $(".loading .pic").animate({width:"50%"},)

</script>

<section class="pro">

  <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3280010440,2340064&fm=26&gp=0.jpg">

</section>

<script type="text/javascript">

  $(".loading .pic").animate({width:"80%"},)

</script>

<section class="news">

  <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2687972484,527558523&fm=26&gp=0.jpg">

</section>

<script type="text/javascript">

  $(".loading .pic").animate({width:"95%"},)

</script>

<footer>

  <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1173737556,2699518622&fm=26&gp=0.jpg">

</footer>

<script type="text/javascript">

  $(".loading .pic").animate({width:"100%"},,function () {

    $(".loading").fadeOut();

  })

</script>

</body>

</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. svn -- svn数据仓库

    在svn中我们的项目,不能称之为项目或文件夹,而是称之为“仓库” 仓库的建立步骤: 1.创建代码仓库 l 在任意盘符下建立文件夹(D:\svn\myApp\)做为我们的版本库根目录,如我们需要建立一个 ...

  2. 转载： IM系统架构设计之浅见

    出处:http://yaocoder.blog.51cto.com/2668309/1412029 背 景:除去大名鼎鼎的QQ这款即时聊天工具,还有许多细分行业的IM,比如淘宝阿里旺旺.网易泡泡.YY ...

  3. 基于redis集群实现的分布式锁,可用于秒杀,定时器。

    在分布式系统中,经常会出现需要竞争同一资源的情况,使用redis可以实现分布式锁. 前提:redis集群已经整合项目,并且可以直接注入JedisCluster使用: @Autowired privat ...

  4. Javascript数组与类数组对象

    问题来由: 之前面试X公司的时候,问我关于原型链知道多少,于是我就开始说了一些有关于原型链的东西,面试官问Array的原型是什么,我说是对象,毕竟Array.prototype===array.__p ...

  5. Node.js+Express on IIS(续)

    前一篇文章介绍了如何用iis来伺服node网站(开发期间特别有用),结果还落掉一点,我们用node来做restful服务的时候,很多时候可能要响应500系列的状态码,并不是整个系统从头到尾都是200, ...

  6. level 6 - unit3 -- 非限制性定语从句

    非限制性定语从句 例子1 he has a son who is a fireman who 引导一个定语从句. who 是修饰前面的son. 翻译的意思:他有一个消防员的儿子 he has a so ...

  7. Android开发学习笔记-splash画面的显示

    贴代码: <?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android=&qu ...

  8. 织梦漏洞可疑PHP文件/article文件夹

    常见可疑文件夹: 1:article文件夹:最近很多织梦系统网站根目录被上传article文件件,里面有很多赌博静态违法html页面,可疑直接删除,此类违法信息大部分是由于您的网站存在dedecms安 ...

  9. yum和apt-get用法及区别

    https://www.cnblogs.com/garinzhang/p/diff_between_yum_apt-get_in_linux.html

  10. AWS系列-创建 IAM 用户

    创建 IAM 用户(控制台) 官方文档 https://docs.aws.amazon.com/zh_cn/IAM/latest/UserGuide/introduction.html 通过 AWS ...