ArchiveBox/archivebox/templates/core/progressbar.html

<style>
  /* Loading Progress Bar */
    #progress {
        position: absolute;
        z-index: 1000;
        top: 0px;
        left: -6px;
        width: 2%;
        opacity: 1;
        height: 2px;
        background: #1a1a1a;
        border-radius: 1px;
        transition: width 4s ease-out, opacity 400ms linear;
    }

    @-moz-keyframes bugfix { from { padding-right: 1px ; } to { padding-right: 0; } }
</style>
<script>
    // Page Loading Bar
    const archiveboxJQuery = (window.django && window.django.jQuery) || window.jQuery;
    window.loadStart = function(distance) {
        if (!archiveboxJQuery) return;
        var distance = distance || 0;
        // only add progrstess bar if not already present
        if (archiveboxJQuery("#loading-bar").length == 0) {
            archiveboxJQuery("body").add("<div id=\"loading-bar\"></div>");
        }
        if (archiveboxJQuery("#progress").length === 0) {
            archiveboxJQuery("body").append(archiveboxJQuery("<div></div>").attr("id", "progress"));
            let last_distance = (distance || (30 + (Math.random() * 30)))
            archiveboxJQuery("#progress").width(last_distance + "%");
            setInterval(function() {
                last_distance += Math.random()
                archiveboxJQuery("#progress").width(last_distance + "%");
            }, 1000)
        }
    };

    window.loadFinish = function() {
        if (!archiveboxJQuery) return;
        const progress = archiveboxJQuery("#progress");
        progress.width("101%");
        window.setTimeout(function() {
            progress.remove();
        }, 600);
    };
    window.loadStart();
    window.addEventListener('beforeunload', function() {window.loadStart(27)});
    document.addEventListener('DOMContentLoaded', function() {window.loadFinish()});
</script>