【CSS系列】网页头部进度条方式一
<!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系列】网页头部进度条方式一的更多相关文章
- CSS在网页中应用的方式_嵌入式
内联式样式表:直接写在现有的标记中,比如: 复制代码 代码如下: <p style="font-size:24px;">www.phpstudy.net</p&g ...
- iOS-仿支付宝加载web网页添加进度条
代码地址如下:http://www.demodashi.com/demo/11727.html 目前市场上APP常会嵌入不少的h5页面,参照支付宝显示web页面的方式, 做了一个导航栏下的加载进度条. ...
- nprogress.js 头部进度条使用方法
nprogress.js 头部进度条 引入CSS\JS <link rel="stylesheet" type="text/css" href=" ...
- Android -- 真正的 高仿微信 打开网页的进度条效果
(本博客为原创,http://www.cnblogs.com/linguanh/) 目录: 一,为什么说是真正的高仿? 二,为什么要搞缓慢效果? 三,我的实现思路 四,代码,内含注释 五,使用方法与截 ...
- 模仿也是提高，纯css小技巧实现头部进度条
刚开始的时候我也觉得不可能,但是就是这么神奇,总有大神给你意想不到的惊喜. 快来感受一下把.(仔细看看头部黄色条的变化) 思考一下啊,怎么出现的那,其实作者使用了一点小技巧,那就是背景色渐变和遮挡产生 ...
- HTML5 CSS3 诱人的实例 ： 网页载入进度条的实现，下载进度条等
今天给大家带来一个比較炫的进度条,进度条在一耗时操作上给用户一个比較好的体验,不会让用户认为在盲目等待,对于没有进度条的长时间等待,用户会任务死机了,毫不犹豫的关掉应用:一般用于下载任务,删除大量任务 ...
- Qt自定义控件系列(一) --- 圆形进度条
本系列主要使用Qt painter来实现一些基础控件.主要是对平时自行编写的一些自定义控件的总结. 为了简洁.低耦合,我们尽量不使用图片,qrc,ui等文件,而只使用c++的.h和.cpp文件. 由于 ...
- JS网页顶部进度条demo
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- 网页载入进度条中的javascript
demo地址:http://output.jsbin.com/buquyedosa 思路例如以下:代码都有凝视,就不一一介绍了. <!DOCTYPE html> <html> ...
随机推荐
- C# 在EF中直接运行SQL命令
相信不少使用EF的同志们已经知道如何在EF中运行SQL命令了.我在这里简单总结下,希望对大家学习EF有所帮助! 在 EF第一个版本(.NET 3.5 SP1)中,我们只能通过将ObjectContex ...
- memcached能获取所有的key吗
memcached能获取所有的key吗 Memcache 查看列出所有key方法 Memcached中获取所有的key 特别要注意:memcached保存的值需要序列化,否则是无法保存的,而且是不会报 ...
- UNIX环境编程学习笔记（13）——文件I/O之标准I/O流
lienhua342014-09-29 1 标准 I/O 流 之前学习的都是不带缓冲的 I/O 操作函数,直接针对文件描述符的,每调用一次函数可能都会触发一次系统调用,单次调用可能比较快捷.但是,对于 ...
- Cannot call sendError() after the response has been committed - baiyangliu
当response提交后,不能调用sendError(),什么意思? 出现这个错误,一定是多次response导致的.可以这么理解,承载客户端和服务器进行Http交互的Socket连接已经关闭了,而你 ...
- LINUX下安装软件方法命令方法
1.通常Linux应用软件的安装包有三种: 1) tar包,如software-1.2.3-1.tar.gz.它是使用UNIX系统的打包工具tar打包的. 2) rpm包,如software-1.2. ...
- centos 中文乱码解决途径
在使用CentOS系统时,安装的时候可能你会遇到英文的CentOS系统,在这中情况下安装CentOS系统时是默认安装(即英文).安装完毕后,出现的各种中文乱码.那么,我们如何解决这种问题呢. 一.Ce ...
- 第二种方式，修改python unittest的执行顺序，使用猴子补丁
1.按照测试用例的上下顺序,而不是按方法的名称的字母顺序来执行测试用例. 之前的文章链接 python修改python unittest的运行顺序 之前写的,不是猴子补丁,而是要把Test用例的类名传 ...
- Apache中的Order Allow,Deny用法详解
本文讲述了Apache中的Order Allow,Deny用法.分享给大家供大家参考,具体如下: Allow和Deny可以用于apache的conf文件或者.htaccess文件中(配合Directo ...
- Android数据库升级、降级、创建(onCreate() onUpgrade() onDowngrade()）的注意点
以下内容可以作为面试官在面试的时候的问题,感觉比较好,是比较常用的知识点,可以用来考察基础是否扎实. 也可以程序猿学习.开发中的注意点.因为稍微不注意,就有可能导致数据库不能用. DBAdapter. ...
- PMP模拟考试-1
1. A manufacturing project has a schedule performance index (SPI) of 0.89 and a cost performance ind ...