前端实现上传文件进度条

效果

image.png

代码

html
    <div class="gogrogress">
        <progress value="0" max="100">您的浏览器不支持progress元素</progress><span></span>
    </div>
    <button>暂停</button>


js

      $('button').on({
            click: function () {
                flag = false;

            }
        })
        var flag = true;
        goprogress()
        $('progress').show()
        function goprogress() {
            var pro = $('progress')[0];
            gotoend(pro, 0);
        }
        function gotoend(pro, value) {
            if (flag) {
                var value = value + 1;
                $('span').text(value + '%')
                pro.value = value;
                if (value < 100) {
                    setTimeout(function () { gotoend(pro, value); }, 20)
                } else {
                    console.log("任务完成")
                }
            }

        }

样式
    <style>
        body {
            font-size: .3rem;
        }

        .gogrogress progress {
            width: 200px;
            display: none;
            height: 16px;
            display: none;
        }

        .gogrogress span {
            font-size: .3rem;
        }

        ::-ms-fill {
            background: #0075ff;
        }

        ::-moz-progress-bar {
            background: #0075ff;
        }

        ::-webkit-progress-bar {
            background: #0075ff;
        }

        ::-webkit-progress-value {
            background: #0075ff;
        }
    </style>