欢迎您访问橙子博客
推荐

网页顶部加载进度条,跟随网页加载完自动消失

作者
橙子2024-01-20 19:01 539 浏览
打赏 收藏

网页顶部加载进度条,跟随网页加载完自动消失

如图:

代码如下

css:

.pace {
    -webkit-pointer-events:none;
    pointer-events:none;
    -webkit-user-select:none;
    -moz-user-select:none;
    user-select:none;
}
.pace-inactive {
    display:none;/*此段代码进度条跑完后隐藏*/
}
.pace .pace-progress {
    background:#ff0000;/*进度条颜色*/
    position:fixed;
    z-index:2000;
    top:0;
    left:0;/*进度条开始位置*/
    height:3px;/*进度条高度(宽度)*/
    -webkit-transition:width 0.1s;
    -moz-transition:width 0.1s;
    -o-transition:width 0.1s;
    transition:width 0.1s;
}

‌js:

(function() {
    var AjaxMonitor, Bar, DocumentMonitor, ElementMonitor, ElementTracker, EventLagMonitor, Evented, Events, NoTargetError, RequestIntercept, SOURCE_KEYS, Scaler, SocketRequestTracker, XHRRequestTracker, animation, avgAmplitude, bar, cancelAnimation, cancelAnimationFrame, defaultOptions, extend, extendNative, getFromDOM, getIntercept, handlePushState, ignoreStack, init, now, options, requestAnimationFrame, result, runAnimation, scalers, shouldIgnoreURL, shouldTrack, source, sources, uniScaler, _WebSocket, _XDomainRequest, _XMLHttpRequest, _i, _intercept, _len, _pushState, _ref, _ref1, _replaceState, __slice = [].slice,
    __hasProp = {}.hasOwnProperty,
    __extends = function(child, parent) {
        for (var key in parent) {
            if (__hasProp.call(parent, key)) {
                child[key] = parent[key]
            }
        }
        function ctor() {
            this.constructor = child
        }
        ctor.prototype = parent.prototype;
        child.prototype = new ctor();
        child.__super__ = parent.prototype;
        return child
    },
    __indexOf = [].indexOf ||
    function(item) {
        for (var i = 0,
        l = this.length; i < l; i++) {
            if (i in this && this[i] === item) {
                return i
            }
        }
        return - 1
    };
    defaultOptions = {
        catchupTime: 500,
        initialRate: 0.03,
        minTime: 500,
        ghostTime: 500,
        maxProgressPerFrame: 10,
        easeFactor: 1.25,
        startOnPageLoad: true,
        restartOnPushState: true,
        restartOnRequestAfter: 500,
        target: "body",
        elements: {
            checkInterval: 100,
            selectors: ["body"]
        },
        eventLag: {
            minSamples: 10,
            sampleCount: 3,
            lagThreshold: 3
        },
        ajax: {
            trackMethods: ["GET"],
            trackWebSockets: true,
            ignoreURLs: []
        }
    };
    now = function() {
        var _ref;
        return (_ref = typeof performance !== "undefined" && performance !== null ? typeof performance.now === "function" ? performance.now() : void 0 : void 0) != null ? _ref: +(new Date)
    };
    requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
    cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame;
    if (requestAnimationFrame == null) {
        requestAnimationFrame = function(fn) {
            return setTimeout(fn, 50)
        };
        cancelAnimationFrame = function(id) {
            return clearTimeout(id)
        }
    }
    runAnimation = function(fn) {
        var last, tick;
        last = now();
        tick = function() {
            var diff;
            diff = now() - last;
            if (diff >= 33) {
                last = now();
                return fn(diff,
                function() {
                    return requestAnimationFrame(tick)
                })
            } else {
                return setTimeout(tick, 33 - diff)
            }
        };
        return tick()
    };
    result = function() {
        var args, key, obj;
        obj = arguments[0],
        key = arguments[1],
        args = 3 <= arguments.length ? __slice.call(arguments, 2) : [];
        if (typeof obj[key] === "function") {
            return obj[key].apply(obj, args)
        } else {
            return obj[key]
        }
    };
    extend = function() {
        var key, out, source, sources, val, _i, _len;
        out = arguments[0],
        sources = 2 <= arguments.length ? __slice.call(arguments, 1) : [];
        for (_i = 0, _len = sources.length; _i < _len; _i++) {
            source = sources[_i];
            if (source) {
                for (key in source) {
                    if (!__hasProp.call(source, key)) {
                        continue
                    }
                    val = source[key];
                    if ((out[key] != null) && typeof out[key] === "object" && (val != null) && typeof val === "object") {
                        extend(out[key], val)
                    } else {
                        out[key] = val
                    }
                }
            }
        }
        return out
    };
    avgAmplitude = function(arr) {
        var count, sum, v, _i, _len;
        sum = count = 0;
        for (_i = 0, _len = arr.length; _i < _len; _i++) {
            v = arr[_i];
            sum += Math.abs(v);
            count++
        }
        return sum / count
    };
    getFromDOM = function(key, json) {
        var data, e, el;
        if (key == null) {
            key = "options"
        }
        if (json == null) {
            json = true
        }
        el = document.querySelector("[data-pace-" + key + "]");
        if (!el) {
            return
        }
        data = el.getAttribute("data-pace-" + key);
        if (!json) {
            return data
        }
        try {
            return JSON.parse(data)
        } catch(_error) {
            e = _error;
            return typeof console !== "undefined" && console !== null ? console.error("Error parsing inline pace options", e) : void 0
        }
    };
    Evented = (function() {
        function Evented() {}
        Evented.prototype.on = function(event, handler, ctx, once) {
            var _base;
            if (once == null) {
                once = false
            }
            if (this.bindings == null) {
                this.bindings = {}
            }
            if ((_base = this.bindings)[event] == null) {
                _base[event] = []
            }
            return this.bindings[event].push({
                handler: handler,
                ctx: ctx,
                once: once
            })
        };
        Evented.prototype.once = function(event, handler, ctx) {
            return this.on(event, handler, ctx, true)
        };
        Evented.prototype.off = function(event, handler) {
            var i, _ref, _results;
            if (((_ref = this.bindings) != null ? _ref[event] : void 0) == null) {
                return
            }
            if (handler == null) {
                return delete this.bindings[event]
            } else {
                i = 0;
                _results = [];
                while (i < this.bindings[event].length) {
                    if (this.bindings[event][i].handler === handler) {
                        _results.push(this.bindings[event].splice(i, 1))
                    } else {
                        _results.push(i++)
                    }
                }
                return _results
            }
        };
        Evented.prototype.trigger = function() {
            var args, ctx, event, handler, i, once, _ref, _ref1, _results;
            event = arguments[0],
            args = 2 <= arguments.length ? __slice.call(arguments, 1) : [];
            if ((_ref = this.bindings) != null ? _ref[event] : void 0) {
                i = 0;
                _results = [];
                while (i < this.bindings[event].length) {
                    _ref1 = this.bindings[event][i],
                    handler = _ref1.handler,
                    ctx = _ref1.ctx,
                    once = _ref1.once;
                    handler.apply(ctx != null ? ctx: this, args);
                    if (once) {
                        _results.push(this.bindings[event].splice(i, 1))
                    } else {
                        _results.push(i++)
                    }
                }
                return _results
            }
        };
        return Evented
    })();
    if (window.Pace == null) {
        window.Pace = {}
    }
    extend(Pace, Evented.prototype);
    options = Pace.options = extend({},
    defaultOptions, window.paceOptions, getFromDOM());
    _ref = ["ajax", "document", "eventLag", "elements"];
    for (_i = 0, _len = _ref.length; _i < _len; _i++) {
        source = _ref[_i];
        if (options[source] === true) {
            options[source] = defaultOptions[source]
        }
    }
    NoTargetError = (function(_super) {
        __extends(NoTargetError, _super);
        function NoTargetError() {
            _ref1 = NoTargetError.__super__.constructor.apply(this, arguments);
            return _ref1
        }
        return NoTargetError
    })(Error);
    Bar = (function() {
        function Bar() {
            this.progress = 0
        }
        Bar.prototype.getElement = function() {
            var targetElement;
            if (this.el == null) {
                targetElement = document.querySelector(options.target);
                if (!targetElement) {
                    throw new NoTargetError
                }
                this.el = document.createElement("div");
                this.el.className = "pace pace-active";
                document.body.className = document.body.className.replace(/pace-done/g, "");
                document.body.className += " pace-running";
                this.el.innerHTML = '<div class="pace-progress">\n  <div class="pace-progress-inner"></div>\n</div>\n<div class="pace-activity"></div>';
                if (targetElement.firstChild != null) {
                    targetElement.insertBefore(this.el, targetElement.firstChild)
                } else {
                    targetElement.appendChild(this.el)
                }
            }
            return this.el
        };
        Bar.prototype.finish = function() {
            var el;
            el = this.getElement();
            el.className = el.className.replace("pace-active", "");
            el.className += " pace-inactive";
            document.body.className = document.body.className.replace("pace-running", "");
            return document.body.className += " pace-done"
        };
        Bar.prototype.update = function(prog) {
            this.progress = prog;
            return this.render()
        };
        Bar.prototype.destroy = function() {
            try {
                this.getElement().parentNode.removeChild(this.getElement())
            } catch(_error) {
                NoTargetError = _error
            }
            return this.el = void 0
        };
        Bar.prototype.render = function() {
            var el, progressStr;
            if (document.querySelector(options.target) == null) {
                return false
            }
            el = this.getElement();
            el.children[0].style.width = "" + this.progress + "%";
            if (!this.lastRenderedProgress || this.lastRenderedProgress | 0 !== this.progress | 0) {
                el.children[0].setAttribute("data-progress-text", "" + (this.progress | 0) + "%");
                if (this.progress >= 100) {
                    progressStr = "99"
                } else {
                    progressStr = this.progress < 10 ? "0": "";
                    progressStr += this.progress | 0
                }
                el.children[0].setAttribute("data-progress", "" + progressStr)
            }
            return this.lastRenderedProgress = this.progress
        };
        Bar.prototype.done = function() {
            return this.progress >= 100
        };
        return Bar
    })();
    Events = (function() {
        function Events() {
            this.bindings = {}
        }
        Events.prototype.trigger = function(name, val) {
            var binding, _j, _len1, _ref2, _results;
            if (this.bindings[name] != null) {
                _ref2 = this.bindings[name];
                _results = [];
                for (_j = 0, _len1 = _ref2.length; _j < _len1; _j++) {
                    binding = _ref2[_j];
                    _results.push(binding.call(this, val))
                }
                return _results
            }
        };
        Events.prototype.on = function(name, fn) {
            var _base;
            if ((_base = this.bindings)[name] == null) {
                _base[name] = []
            }
            return this.bindings[name].push(fn)
        };
        return Events
    })();
    _XMLHttpRequest = window.XMLHttpRequest;
    _XDomainRequest = window.XDomainRequest;
    _WebSocket = window.WebSocket;
    extendNative = function(to, from) {
        var e, key, val, _results;
        _results = [];
        for (key in from.prototype) {
            try {
                val = from.prototype[key];
                if ((to[key] == null) && typeof val !== "function") {
                    _results.push(to[key] = val)
                } else {
                    _results.push(void 0)
                }
            } catch(_error) {
                e = _error
            }
        }
        return _results
    };
    ignoreStack = [];
    Pace.ignore = function() {
        var args, fn, ret;
        fn = arguments[0],
        args = 2 <= arguments.length ? __slice.call(arguments, 1) : [];
        ignoreStack.unshift("ignore");
        ret = fn.apply(null, args);
        ignoreStack.shift();
        return ret
    };
    Pace.track = function() {
        var args, fn, ret;
        fn = arguments[0],
        args = 2 <= arguments.length ? __slice.call(arguments, 1) : [];
        ignoreStack.unshift("track");
        ret = fn.apply(null, args);
        ignoreStack.shift();
        return ret
    };
    shouldTrack = function(method) {
        var _ref2;
        if (method == null) {
            method = "GET"
        }
        if (ignoreStack[0] === "track") {
            return "force"
        }
        if (!ignoreStack.length && options.ajax) {
            if (method === "socket" && options.ajax.trackWebSockets) {
                return true
            } else {
                if (_ref2 = method.toUpperCase(), __indexOf.call(options.ajax.trackMethods, _ref2) >= 0) {
                    return true
                }
            }
        }
        return false
    };
    RequestIntercept = (function(_super) {
        __extends(RequestIntercept, _super);
        function RequestIntercept() {
            var monitorXHR, _this = this;
            RequestIntercept.__super__.constructor.apply(this, arguments);
            monitorXHR = function(req) {
                var _open;
                _open = req.open;
                return req.open = function(type, url, async) {
                    if (shouldTrack(type)) {
                        _this.trigger("request", {
                            type: type,
                            url: url,
                            request: req
                        })
                    }
                    return _open.apply(req, arguments)
                }
            };
            window.XMLHttpRequest = function(flags) {
                var req;
                req = new _XMLHttpRequest(flags);
                monitorXHR(req);
                return req
            };
            try {
                extendNative(window.XMLHttpRequest, _XMLHttpRequest)
            } catch(_error) {}
            if (_XDomainRequest != null) {
                window.XDomainRequest = function() {
                    var req;
                    req = new _XDomainRequest;
                    monitorXHR(req);
                    return req
                };
                try {
                    extendNative(window.XDomainRequest, _XDomainRequest)
                } catch(_error) {}
            }
            if ((_WebSocket != null) && options.ajax.trackWebSockets) {
                window.WebSocket = function(url, protocols) {
                    var req;
                    if (protocols != null) {
                        req = new _WebSocket(url, protocols)
                    } else {
                        req = new _WebSocket(url)
                    }
                    if (shouldTrack("socket")) {
                        _this.trigger("request", {
                            type: "socket",
                            url: url,
                            protocols: protocols,
                            request: req
                        })
                    }
                    return req
                };
                try {
                    extendNative(window.WebSocket, _WebSocket)
                } catch(_error) {}
            }
        }
        return RequestIntercept
    })(Events);
    _intercept = null;
    getIntercept = function() {
        if (_intercept == null) {
            _intercept = new RequestIntercept
        }
        return _intercept
    };
    shouldIgnoreURL = function(url) {
        var pattern, _j, _len1, _ref2;
        _ref2 = options.ajax.ignoreURLs;
        for (_j = 0, _len1 = _ref2.length; _j < _len1; _j++) {
            pattern = _ref2[_j];
            if (typeof pattern === "string") {
                if (url.indexOf(pattern) !== -1) {
                    return true
                }
            } else {
                if (pattern.test(url)) {
                    return true
                }
            }
        }
        return false
    };
    getIntercept().on("request",
    function(_arg) {
        var after, args, request, type, url;
        type = _arg.type,
        request = _arg.request,
        url = _arg.url;
        if (shouldIgnoreURL(url)) {
            return
        }
        if (!Pace.running && (options.restartOnRequestAfter !== false || shouldTrack(type) === "force")) {
            args = arguments;
            after = options.restartOnRequestAfter || 0;
            if (typeof after === "boolean") {
                after = 0
            }
            return setTimeout(function() {
                var stillActive, _j, _len1, _ref2, _ref3, _results;
                if (type === "socket") {
                    stillActive = request.readyState < 2
                } else {
                    stillActive = (0 < (_ref2 = request.readyState) && _ref2 < 4)
                }
                if (stillActive) {
                    Pace.restart();
                    _ref3 = Pace.sources;
                    _results = [];
                    for (_j = 0, _len1 = _ref3.length; _j < _len1; _j++) {
                        source = _ref3[_j];
                        if (source instanceof AjaxMonitor) {
                            source.watch.apply(source, args);
                            break
                        } else {
                            _results.push(void 0)
                        }
                    }
                    return _results
                }
            },
            after)
        }
    });
    AjaxMonitor = (function() {
        function AjaxMonitor() {
            var _this = this;
            this.elements = [];
            getIntercept().on("request",
            function() {
                return _this.watch.apply(_this, arguments)
            })
        }
        AjaxMonitor.prototype.watch = function(_arg) {
            var request, tracker, type, url;
            type = _arg.type,
            request = _arg.request,
            url = _arg.url;
            if (shouldIgnoreURL(url)) {
                return
            }
            if (type === "socket") {
                tracker = new SocketRequestTracker(request)
            } else {
                tracker = new XHRRequestTracker(request)
            }
            return this.elements.push(tracker)
        };
        return AjaxMonitor
    })();
    XHRRequestTracker = (function() {
        function XHRRequestTracker(request) {
            var event, size, _j, _len1, _onreadystatechange, _ref2, _this = this;
            this.progress = 0;
            if (window.ProgressEvent != null) {
                size = null;
                request.addEventListener("progress",
                function(evt) {
                    if (evt.lengthComputable) {
                        return _this.progress = 100 * evt.loaded / evt.total
                    } else {
                        return _this.progress = _this.progress + (100 - _this.progress) / 2
                    }
                });
                _ref2 = ["load", "abort", "timeout", "error"];
                for (_j = 0, _len1 = _ref2.length; _j < _len1; _j++) {
                    event = _ref2[_j];
                    request.addEventListener(event,
                    function() {
                        return _this.progress = 100
                    })
                }
            } else {
                _onreadystatechange = request.onreadystatechange;
                request.onreadystatechange = function() {
                    var _ref3;
                    if ((_ref3 = request.readyState) === 0 || _ref3 === 4) {
                        _this.progress = 100
                    } else {
                        if (request.readyState === 3) {
                            _this.progress = 50
                        }
                    }
                    return typeof _onreadystatechange === "function" ? _onreadystatechange.apply(null, arguments) : void 0
                }
            }
        }
        return XHRRequestTracker
    })();
    SocketRequestTracker = (function() {
        function SocketRequestTracker(request) {
            var event, _j, _len1, _ref2, _this = this;
            this.progress = 0;
            _ref2 = ["error", "open"];
            for (_j = 0, _len1 = _ref2.length; _j < _len1; _j++) {
                event = _ref2[_j];
                request.addEventListener(event,
                function() {
                    return _this.progress = 100
                })
            }
        }
        return SocketRequestTracker
    })();
    ElementMonitor = (function() {
        function ElementMonitor(options) {
            var selector, _j, _len1, _ref2;
            if (options == null) {
                options = {}
            }
            this.elements = [];
            if (options.selectors == null) {
                options.selectors = []
            }
            _ref2 = options.selectors;
            for (_j = 0, _len1 = _ref2.length; _j < _len1; _j++) {
                selector = _ref2[_j];
                this.elements.push(new ElementTracker(selector))
            }
        }
        return ElementMonitor
    })();
    ElementTracker = (function() {
        function ElementTracker(selector) {
            this.selector = selector;
            this.progress = 0;
            this.check()
        }
        ElementTracker.prototype.check = function() {
            var _this = this;
            if (document.querySelector(this.selector)) {
                return this.done()
            } else {
                return setTimeout((function() {
                    return _this.check()
                }), options.elements.checkInterval)
            }
        };
        ElementTracker.prototype.done = function() {
            return this.progress = 100
        };
        return ElementTracker
    })();
    DocumentMonitor = (function() {
        DocumentMonitor.prototype.states = {
            loading: 0,
            interactive: 50,
            complete: 100
        };
        function DocumentMonitor() {
            var _onreadystatechange, _ref2, _this = this;
            this.progress = (_ref2 = this.states[document.readyState]) != null ? _ref2: 100;
            _onreadystatechange = document.onreadystatechange;
            document.onreadystatechange = function() {
                if (_this.states[document.readyState] != null) {
                    _this.progress = _this.states[document.readyState]
                }
                return typeof _onreadystatechange === "function" ? _onreadystatechange.apply(null, arguments) : void 0
            }
        }
        return DocumentMonitor
    })();
    EventLagMonitor = (function() {
        function EventLagMonitor() {
            var avg, interval, last, points, samples, _this = this;
            this.progress = 0;
            avg = 0;
            samples = [];
            points = 0;
            last = now();
            interval = setInterval(function() {
                var diff;
                diff = now() - last - 50;
                last = now();
                samples.push(diff);
                if (samples.length > options.eventLag.sampleCount) {
                    samples.shift()
                }
                avg = avgAmplitude(samples);
                if (++points >= options.eventLag.minSamples && avg < options.eventLag.lagThreshold) {
                    _this.progress = 100;
                    return clearInterval(interval)
                } else {
                    return _this.progress = 100 * (3 / (avg + 3))
                }
            },
            50)
        }
        return EventLagMonitor
    })();
    Scaler = (function() {
        function Scaler(source) {
            this.source = source;
            this.last = this.sinceLastUpdate = 0;
            this.rate = options.initialRate;
            this.catchup = 0;
            this.progress = this.lastProgress = 0;
            if (this.source != null) {
                this.progress = result(this.source, "progress")
            }
        }
        Scaler.prototype.tick = function(frameTime, val) {
            var scaling;
            if (val == null) {
                val = result(this.source, "progress")
            }
            if (val >= 100) {
                this.done = true
            }
            if (val === this.last) {
                this.sinceLastUpdate += frameTime
            } else {
                if (this.sinceLastUpdate) {
                    this.rate = (val - this.last) / this.sinceLastUpdate
                }
                this.catchup = (val - this.progress) / options.catchupTime;
                this.sinceLastUpdate = 0;
                this.last = val
            }
            if (val > this.progress) {
                this.progress += this.catchup * frameTime
            }
            scaling = 1 - Math.pow(this.progress / 100, options.easeFactor);
            this.progress += scaling * this.rate * frameTime;
            this.progress = Math.min(this.lastProgress + options.maxProgressPerFrame, this.progress);
            this.progress = Math.max(0, this.progress);
            this.progress = Math.min(100, this.progress);
            this.lastProgress = this.progress;
            return this.progress
        };
        return Scaler
    })();
    sources = null;
    scalers = null;
    bar = null;
    uniScaler = null;
    animation = null;
    cancelAnimation = null;
    Pace.running = false;
    handlePushState = function() {
        if (options.restartOnPushState) {
            return Pace.restart()
        }
    };
    if (window.history.pushState != null) {
        _pushState = window.history.pushState;
        window.history.pushState = function() {
            handlePushState();
            return _pushState.apply(window.history, arguments)
        }
    }
    if (window.history.replaceState != null) {
        _replaceState = window.history.replaceState;
        window.history.replaceState = function() {
            handlePushState();
            return _replaceState.apply(window.history, arguments)
        }
    }
    SOURCE_KEYS = {
        ajax: AjaxMonitor,
        elements: ElementMonitor,
        document: DocumentMonitor,
        eventLag: EventLagMonitor
    }; (init = function() {
        var type, _j, _k, _len1, _len2, _ref2, _ref3, _ref4;
        Pace.sources = sources = [];
        _ref2 = ["ajax", "elements", "document", "eventLag"];
        for (_j = 0, _len1 = _ref2.length; _j < _len1; _j++) {
            type = _ref2[_j];
            if (options[type] !== false) {
                sources.push(new SOURCE_KEYS[type](options[type]))
            }
        }
        _ref4 = (_ref3 = options.extraSources) != null ? _ref3: [];
        for (_k = 0, _len2 = _ref4.length; _k < _len2; _k++) {
            source = _ref4[_k];
            sources.push(new source(options))
        }
        Pace.bar = bar = new Bar;
        scalers = [];
        return uniScaler = new Scaler
    })();
    Pace.stop = function() {
        Pace.trigger("stop");
        Pace.running = false;
        bar.destroy();
        cancelAnimation = true;
        if (animation != null) {
            if (typeof cancelAnimationFrame === "function") {
                cancelAnimationFrame(animation)
            }
            animation = null
        }
        return init()
    };
    Pace.restart = function() {
        Pace.trigger("restart");
        Pace.stop();
        return Pace.start()
    };
    Pace.go = function() {
        var start;
        Pace.running = true;
        bar.render();
        start = now();
        cancelAnimation = false;
        return animation = runAnimation(function(frameTime, enqueueNextFrame) {
            var avg, count, done, element, elements, i, j, remaining, scaler, scalerList, sum, _j, _k, _len1, _len2, _ref2;
            remaining = 100 - bar.progress;
            count = sum = 0;
            done = true;
            for (i = _j = 0, _len1 = sources.length; _j < _len1; i = ++_j) {
                source = sources[i];
                scalerList = scalers[i] != null ? scalers[i] : scalers[i] = [];
                elements = (_ref2 = source.elements) != null ? _ref2: [source];
                for (j = _k = 0, _len2 = elements.length; _k < _len2; j = ++_k) {
                    element = elements[j];
                    scaler = scalerList[j] != null ? scalerList[j] : scalerList[j] = new Scaler(element);
                    done &= scaler.done;
                    if (scaler.done) {
                        continue
                    }
                    count++;
                    sum += scaler.tick(frameTime)
                }
            }
            avg = sum / count;
            bar.update(uniScaler.tick(frameTime, avg));
            if (bar.done() || done || cancelAnimation) {
                bar.update(100);
                Pace.trigger("done");
                return setTimeout(function() {
                    bar.finish();
                    Pace.running = false;
                    return Pace.trigger("hide")
                },
                Math.max(options.ghostTime, Math.max(options.minTime - (now() - start), 0)))
            } else {
                return enqueueNextFrame()
            }
        })
    };
    Pace.start = function(_options) {
        extend(options, _options);
        Pace.running = true;
        try {
            bar.render()
        } catch(_error) {
            NoTargetError = _error
        }
        if (!document.querySelector(".pace")) {
            return setTimeout(Pace.start, 50)
        } else {
            Pace.trigger("start");
            return Pace.go()
        }
    };
    if (typeof define === "function" && define.amd) {
        define(function() {
            return Pace
        })
    } else {
        if (typeof exports === "object") {
            module.exports = Pace
        } else {
            if (options.startOnPageLoad) {
                Pace.start()
            }
        }
    }
}).call(this);
打赏 :
分享:
扫码支持 扫码支持
版权声明 1、文章标题:网页顶部加载进度条,跟随网页加载完自动消失
2、本文网址:https://www.ther.cn/Web/18.html
3、本站部分内容来源于网络,仅供大家学习与参考,如有侵权,请联系站长邮箱:906080088@qq.com进行处理。
4、本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。

广告