【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其实和语言没有任何关系,配置完成后任何语 ...

随机推荐

Unity -----一些可能存在的错误
关于Unity中的资源管理,你可能遇到这些问题张鑫 8 个月前原文链接:关于Unity中的资源管理,你可能遇到这些问题 - Blog 在优化Unity项目时,对资源的管理可谓是个系统纷繁的大工程. ...
Wings 3D
Wings 3D 编辑 Wings 3D 是一个开源的三维计算机图形软件.使用翼边数据库.注重于多边形建模,构思取与 Izware 的 Nendo 和 Mirai.支持多种操作系统,包括 Linux. ...
Java虚拟机性能管理神器 - VisualVM（2）入门
一下载VisualVM 最新版本下载历史版本下载二启动VisualVM 三VisualVM用户目录四VisualVM窗口 1应用程序窗口 2详情窗口五VisualVM插件 Java虚拟机性 ...
Git介绍及安装配置
一.概述 1.1git概念 Git是一个开源的分布式版本控制系统,用于敏捷高效处理任意规模的项目,其作者为Linux创造者Linus Torvalds为管理Linux内核而开放的一个开源的版本控制柔软 ...
ttl传输中过期
上renren时遇到一问题,突然间就无法登陆,看了下网络,正常呀,别的网站完全ok,就这不成,所以就ping了一下做以校验:如下图示:传输中过期ttl,这问题少见,新鲜呀:赶紧查了查:原来可能是产生了 ...
linux cfs调度器_理论模型
参考资料:<调度器笔记>Kevin.Liu <Linux kernel development> <深入Linux内核架构> version: 2.6.32.9 下 ...
在selenium中使用css选择器进行元素定位
Sizzle Css3还提供一些直接选取form表单元素的伪类 :input: Finds all input elements (includes textareas, selects, and b ...
lua 时间戳和时间互相转换
1.时间戳转换成时间 local t = 1412753621000 function getTimeStamp(t) return os.date("%Y%m%d%H", ...
windows下redis启动失败提示maxheap flag
windows下redis启动失败 D:\redis>redis-server.exe redis.conf [] Oct ::39.789 # The Windows version of R ...
mongodb 在 Ubuntu系统上的安装及卸载
mongodb官网 The mongodb-org-server package provides an initialization script that starts mongod with t ...

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

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

随机推荐

热门专题