超出了4m后上传服务器 怎么做下载进度条0 0

Creator 2.x
#1

如题 怎么做进度条呀 进度条要放在哪里

1赞
#2

有人知道吗 不然会有短暂显示黑屏体验好差

#3

自顶自顶

#4 
<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8" />
    <title>loading</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="full-screen" content="true" />
    <meta name="screen-orientation" content="portrait" />
    <meta name="x5-fullscreen" content="true" />
    <meta name="360-fullscreen" content="true" />
    <meta name="browsermode" content="application" />
    <meta name="nightmode" content="disable" />

    <link rel="apple-touch-icon" href="app-touch-icon.png" />
    <link rel="apple-touch-icon-precomposed" href="app-touch-icon.png" />
    <link rel="apple-touch-startup-image" href="app-touch-startup.png" />        
    <style>

        body {
            background: #02aff1;
            padding: 0;
            border: 0;
            margin: 0;
            height: 100%;
        }

        html {
            -ms-touch-action: none;
            overflow: hidden;
        }

        div, canvas {
            display: block;
            position: absolute;
            margin: 0 auto;
            padding: 0;
            border: 0;
        }

        textarea {
            resize: none;
        }
        
        #center {
          position: absolute;
          top: 50%;
          left: 50%;
          margin-top: -180px;
          margin-left: -75px;
          width: 150px;
          height: 80px;
          font-family: "Lato", sans-serif;
          font-weight: 600;
          font-size: 16px;
          color: #fff;
          text-align: center;
          -webkit-font-smoothing: antialiased;
        }

        .skype-loader {
          width: 80px;
          height: 80px;
          position: relative;
          margin: auto;
          margin-top: 60px;
          margin-bottom: 70px;
        }

        .skype-loader .dot {
          position: absolute;
          top: 0;
          left: 0;
          width: 80px;
          height: 80px;

          animation: 1.7s dotrotate cubic-bezier(0.775, 0.005, 0.310, 1.000) infinite;
        }

        .skype-loader .dot:nth-child(1) {
          animation-delay: 0.2s;
        }

        .skype-loader .dot:nth-child(2) {
          animation-delay: 0.35s;
        }

        .skype-loader .dot:nth-child(3) {
          animation-delay: 0.45s;
        }

        .skype-loader .dot:nth-child(4) {
          animation-delay: 0.55s;
        }

        .skype-loader .dot:after, .skype-loader .dot .first {
          content: "";
          position: absolute;
          width: 8px;
          height: 8px;
          background: white;
          border-radius: 50%;
          left: 50%;
          margin-left: -4px;
        }

        .skype-loader .dot .first {
          background: #fff;
          margin-top: -4px;
          animation: 1.7s dotscale cubic-bezier(0.775, 0.005, 0.310, 1.000) infinite;
          animation-delay: 0.2s;
        }

        @keyframes dotrotate { 
          from { transform: rotate(0deg); } 
          to { transform: rotate(360deg); }
        }

        @keyframes dotscale { 
          0%, 10% { width: 16px; height: 16px; margin-left: -8px;  margin-top: -4px; } 
          50% { width: 8px; height: 8px; margin-left: -4px; margin-top: 0; }
          90%, 100% { width: 16px; height: 16px;  margin-left: -8px;  margin-top: -4px; }
        }
    </style>
    <script type="text/javascript">

        window.onload = function () {

            var splashDiv = document.getElementById("splashDiv");
            var center = document.getElementById("center");

            var interval = undefined;
            var curr = 0, to = 0, total = 100;
            var dot = ["", ".", "..", "..."];
            var dotIdx = 0, elapsedTime = 0;

            function loadSplash() {
                splashDiv.innerText = "0";
            }

            function disposeSplash() {
                if (interval) {
                    clearInterval(interval);
                    interval = undefined;
                }
            }

            function updateProgress(val) {

                if (to == val) {
                    return;
                }

                to = val;
                to = Math.min(to, total);

                if (!interval) {
                    interval = setInterval(function () {
                        curr = curr < to ? (curr + 180 / 100) : to;
                        splashDiv.innerText = Math.floor(curr);
                        dotIdx += 1 / 60 * 10;
                    }, 1 / 60);
                }
            }

            loadSplash();

            var rand = Date.now().toString() + Math.random().toString();

            var t = 0;
            setInterval(function () {
                updateProgress(t++, 100);
            }, 100);
        };
    </script>
</head>
<body>
    <div id="boundDiv" style="position:absolute;width:100%;height:100%;background-color:#02aff1;z-index: 10000">
        <div id="center">
            <div class="skype-loader">
                <div class="dot">
                    <div class="first"></div>
                </div>
                <div class="dot"></div>
                <div class="dot"></div>
                <div class="dot"></div>
                <div id="splashDiv" style="width:100%;height:100%;line-height:80px;overflow:hidden">0</div>
            </div>
            正在加载中...
        </div>
    </div>
</body>
</html>

不带图片的加载启动页面- -

#5

这是网页吧 要怎么用呀 在微信里新建？