<! DOCTYPE html>"en">"UTF-8"> <title> Real-time Data progress bar </title> <style type="Text/css"> *{padding:0; Margin:0; }. loading{Width: -%; Height: -%; Position:fixed; Top:0; Left:0; Z-index: -; Background: #FFFFFF; }. Loading. pic{width:100px; height:100px; Position:absolute; Top:0; Bottom:0; Left:0; Right:0; 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:03px0#666; Animation:rotate 1s infinite linear; -webkit-animation:rotate 1s infinite linear; } @keyframes Rotate {0%{transform:rotate (0deg);} -%{transform:rotate (360deg);} } @-webkit-keyframes Rotate {0%{-webkit-transform:rotate (0deg);} -%{-webkit-transform:rotate (360deg);} } </style> <script src=".. /js/jquery-3.2.1.js"></script> <script type="Text/javascript">$ (function () {varIMG = $ ("img"); varnum =0; Img.each (function (i) {varOimg =NewImage (); 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>class="Loading"> <divclass="pic"> <span></span> <b>0%</b> </div></div>"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1203727489,1880869354&fm=26&gp=0.jpg ">"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2227804654,860253351&fm=26&gp=0.jpg">"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1203727489,1880869354&fm=26&gp=0.jpg ">"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2227804654,860253351&fm=26&gp=0.jpg">"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1203727489,1880869354&fm=26&gp=0.jpg ">"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2227804654,860253351&fm=26&gp=0.jpg">"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1203727489,1880869354&fm=26&gp=0.jpg ">"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2227804654,860253351&fm=26&gp=0.jpg">"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1203727489,1880869354&fm=26&gp=0.jpg ">"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2227804654,860253351&fm=26&gp=0.jpg">"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1203727489,1880869354&fm=26&gp=0.jpg ">"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2227804654,860253351&fm=26&gp=0.jpg">"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1203727489,1880869354&fm=26&gp=0.jpg ">"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2227804654,860253351&fm=26&gp=0.jpg">"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1203727489,1880869354&fm=26&gp=0.jpg ">"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2227804654,860253351&fm=26&gp=0.jpg">"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1203727489,1880869354&fm=26&gp=0.jpg ">"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2227804654,860253351&fm=26&gp=0.jpg">"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1203727489,1880869354&fm=26&gp=0.jpg ">"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2227804654,860253351&fm=26&gp=0.jpg">"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1203727489,1880869354&fm=26&gp=0.jpg ">"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2227804654,860253351&fm=26&gp=0.jpg">"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1203727489,1880869354&fm=26&gp=0.jpg ">"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2227804654,860253351&fm=26&gp=0.jpg">"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1203727489,1880869354&fm=26&gp=0.jpg ">"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2227804654,860253351&fm=26&gp=0.jpg">"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1203727489,1880869354&fm=26&gp=0.jpg ">"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2227804654,860253351&fm=26&gp=0.jpg">"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1203727489,1880869354&fm=26&gp=0.jpg ">"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2227804654,860253351&fm=26&gp=0.jpg">"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1203727489,1880869354&fm=26&gp=0.jpg ">"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2227804654,860253351&fm=26&gp=0.jpg">"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1203727489,1880869354&fm=26&gp=0.jpg ">"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2227804654,860253351&fm=26&gp=0.jpg">"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1203727489,1880869354&fm=26&gp=0.jpg ">"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2227804654,860253351&fm=26&gp=0.jpg">"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1203727489,1880869354&fm=26&gp=0.jpg ">"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2227804654,860253351&fm=26&gp=0.jpg">"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1203727489,1880869354&fm=26&gp=0.jpg ">"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2227804654,860253351&fm=26&gp=0.jpg">"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1203727489,1880869354&fm=26&gp=0.jpg ">"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2227804654,860253351&fm=26&gp=0.jpg">"http://seopic.699pic.com/photo/50038/2365.jpg_wh1200.jpg"></body>"CSS series" get real-time data to make progress