Website Top Preloading Progress Bar Plugin preload.js (Original)

Add-ons

2026-07-26 00:24 5 次浏览 • 0 次下载 1.4KB

Website Top Preloading Progress Bar Plugin preload.js (Original)

Plugin Description: A preloading progress bar plugin displayed at the top of a website

If the website loads quickly, the loading progress bar will not be displayed.

Usage

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="js/preload.js"></script>
<script type="text/javascript">

// Initialize

$.QianLoad.PageLoading({
    sleep: 50
});
</script>

Source Code Explanation

/*
* @Author: fanqian
* @Date:   2016-06-15 12:34:55
* @Website:   http://iterabc.com/preload-js/
* @Please credit the author and website when using this code
*/
$.QianLoad = {
    PageLoading: function(options) {
        var defaults = {
            delayTime: 500, // Fade-out speed of the progress bar after the page finishes loading
            sleep: 0, // Set the suspension time; no suspension is needed when the value is 0
            css: '<style>*{margin:0;}.load-wrap{width:100%;height:100%;position:absolute;top:0;left:0;background:#ffffff}#pre-load{position:fixed;top:0;height:2px;background:#2085c5;transition:opacity .5s linear}#pre-load span{position:absolute;width:150px;height:2px;-webkit-border-radius:100%;-webkit-box-shadow:#2085c5 1px 0 6px 1px;opacity:1;right:-10px;-webkit-animation:pulse 2s ease-out 0s infinite}@-webkit-keyframes pulse{30%{opacity:.6}60%{opacity:0}to{opacity:.6}}</style>'
            // You can customize the progress bar's style and position
        }
        var options = $.extend(defaults, options);
        // Custom loading HTML content displayed before the page finishes loading
        $('head').append(defaults.css);
        var _LoadingHtml = '<div class="load-wrap" style="width:100%;height:100%;position:absolute;top:0;left:0;background:#ffffff"><div id="pre-load">' + '<span></span>' + '</div></div>';
        // Display the loading effect
        $("body").append(_LoadingHtml);
        // Monitor the page loading status
        document.onreadystatechange = PageLoaded;
        function PageLoaded() {
            var loadingMask = $('#pre-load');
            $({
                property: 0
            }).animate({
                property: 98
            }, {
                duration: 3000,
                step: function() {
                    var percentage = Math.round(this.property);
                    loadingMask.css('width', percentage + "%");
                    // Execute after the page has loaded
                    if (document.readyState == "complete") {
                        loadingMask.css('width', 100 + "%");
                        setTimeout(function() {
                                loadingMask.animate({
                                        "opacity": 0
                                    },
                                    options.delayTime,
                                    function() {
                                        $(this).remove();
                                        $(".load-wrap").remove();
                                        console.log('Loading has been successful');
                                    });
                            },
                            options.sleep);
                    }
                }
            });
        }
    }
}