【CSS系列】获取实时数据做进度

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>实时数据进度条</title>

  <style type="text/css">

    *{

      padding: ;

      margin: ;

    }

    .loading{

      width: %;

      height: %;

      position: fixed;

      top:;

      left: ;

      z-index: ;

      background: #FFFFFF;

    }

    .loading .pic{

      width:100px;

      height: 100px;

      position: absolute;

      top:;

      bottom: ;

      left:;

      right:;

      margin: auto;

      border: 1px solid #FF3333;

      font-size: 30px;

      text-align: center;

      line-height: 100px;

    }

    .loading .pic span{

      display: block;

      width: 80px;

      height: 80px;

      position: absolute;

      top:10px;

      left: 10px;

      /*background: #00CC00;*/

      border-radius: %;

      box-shadow:  3px  #;

      animation: rotate 1s infinite linear;

      -webkit-animation: rotate 1s infinite linear;

    }

    @keyframes rotate {

      %{transform: rotate(0deg);}

     %{transform: rotate(360deg);}

    }

    @-webkit-keyframes rotate {

      %{-webkit-transform: rotate(0deg);}

      %{-webkit-transform: rotate(360deg);}

    }

  </style>

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

  <script type="text/javascript">

    $(

        function () {

        var img = $("img");

        var num = ;

        img.each(function (i) {

          var oImg = new Image();

          oImg.onload = function () {

              oImg.onload = null;

            num ++;

            $(".loading b") .html(parseInt(num/$("img").length*)+"%");

            if(num >= i){

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

            }

          }

          oImg.src=img[i].src;

        })

        }

    )

  </script>

</head>

<body>

<div class="loading">

  <div class="pic">

    <span></span>

    <b>%</b>

  </div>

</div>

<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">

<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">

<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">

<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">

<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">

<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">

<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">

<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">

<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">

<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">

<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">

<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">

<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">

<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">

<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"><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">

<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">

<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">

<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">

<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">

<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">

<img src="http://seopic.699pic.com/photo/50038/2365.jpg_wh1200.jpg">

</body>

</html>

【CSS系列】获取实时数据做进度的更多相关文章

用$.getJSON() 和$.post()获取第三方数据做页面 ——惠品折页面（1）
用$.getJSON() 和$.post()获取第三方数据做页面首页 index.html 页面需要jquery 和 template-web js文件可以直接在官网下载中间导航条的固 ...
使用wesocket从 rabbitMQ获取实时数据
rabbitmq支持stomp组件,通过stomp组件和websocket可以从rabbitMQ获取实时数据.这里分享一个demo: 使用时需要引入的js ,用到了sock.js和stomp.js & ...
ASP.NET框架获取数据字典数据做成树的格式
private List<TreeEntity> treeList = new List<TreeEntity>();//创建一个树的List集合 public ActionR ...
ajax请求获取实时数据
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...
Kafka ETL 之后，我们将如何定义新一代实时数据集成解决方案？
上一个十年,以 Hadoop 为代表的大数据技术发展如火如荼,各种数据平台.数据湖.数据中台等产品和解决方案层出不穷,这些方案最常用的场景包括统一汇聚企业数据,并对这些离线数据进行分析洞察,来达到辅助 ...
人脸检测及识别python实现系列（1）——配置、获取实时视频流
人脸检测及识别python实现系列(1)——配置.获取实时视频流 1. 前言今天用多半天的时间把QQ空间里的几篇年前的旧文搬到了这里,算是完成了博客搬家.QQ空间里还剩下一些记录自己数学学习路线的学 ...
实时获取股票数据，免费！——Python爬虫Sina Stock实战
更多精彩内容,欢迎关注公众号:数量技术宅,也可添加技术宅个人微信号:sljsz01,与我交流. 实时股票数据的重要性对于四大可交易资产:股票.期货.期权.数字货币来说,期货.期权.数字货币,可以从交 ...
Tapdata 肖贝贝：实时数据引擎系列(四)-关于 Oracle 与 Oracle CDC
摘要:想实现 Oracle 的 CDC,排除掉一些通用的比如全量比对, 标记字段获取之外, 真正的增量形式获取变更, 有三种办法: Logminer .XStream .裸日志解析,但不管哪种方法 ...
solr与.net系列课程(四)solr查询参数的讲解与.net如何获取solr数据
solr与.net系列课程(四)solr查询参数的讲解与.net如何获取solr数据上一节我们完成了solr连接数据库,细心的朋友会发现一个问题,就是solr其实和语言没有任何关系,配置完成后任何语 ...

随机推荐

Process和Thread在指定CPU运行
最近帮朋友写了一个多线程程序,他那边一运行多线程就出错,我这边却没有任何问题,找了好久才找到解决方法,原来是CPU的问题,有朋友遇到同样的问题,可以一起参考 //进程与指定cpu绑定 SetProce ...
如何构建高性能MySQL索引
本文的重点在于如何构建一个高性能的MySQL索引,从中你可以学到如何分析一个索引是不是好索引,以及如何构建一个好的索引. 索引误区多列索引一个索引的常见误区是为每一列创建一个索引,如下面创建的索引 ...
一个标准的，兼容性很好的div仿框架的基础模型！
<!DOCTYPE html> <html > <head> <meta http-equiv="Content-Type" conten ...
geoserver PostGIS的安装和使用
PostGIS是一个非常流行并且开源的具有空间分析能力的关系型数据库,它作为PostgreSQL数据库的一个插件.PostgreSQL是一个功能非常强大并且开源的关系型数据库.目前项目使用的版本为Po ...
What's new in JDK 8
(1)http://docs.oracle.com/javase/8/docs/technotes/guides/language/enhancements.html#javase8 (2)https ...
activeMq的helloword
http://blog.csdn.net/clj198606061111/article/details/38236679 点对点的同步消息模型 http://blog.csdn.net/jiuqiy ...
关于测试中哪些信息需要放到jira上面
1.每个新需求的功能点,全部在jira上一一呈现 2.每个bug也一样在jira上一一呈现 3.任务一个需要优化改进的点也一一在jira上呈现然后程序员一直开发新功能和修改新bug,测试人员负责bu ...
c++String类的运算符重载---21
原创博文,转载请标明出处--周学伟http://www.cnblogs.com/zxouxuewei/ 一,创建测试程序包测试代码如下: /* Date: 2017-5-4 * Descripti ...
高可用（HA）架构
http://aokunsang.iteye.com/blog/2053719 浅谈web应用的负载均衡.集群.高可用(HA)解决方案 http://zhuanlan.51cto.com/art/ ...
GoF--装饰者设计模式
顾名思义,装饰模式就是给一个对象增加一些新的功能,而且是动态的,要求装饰对象和被装饰对象实现同一个接口,装饰对象持有被装饰对象的实例. 装饰器模式的应用场景: 1.需要扩展一个类的功能. 2.动态的为 ...

【CSS系列】获取实时数据做进度

【CSS系列】获取实时数据做进度的更多相关文章

随机推荐

热门专题