JSFiddle - React, Tailwind, and code Playground

by Dogbert

HTML

<div class="top line"></div>
<div class="right line"></div>
<div class="bottom line"></div>
<div class="left line"></div>
<div id="progress"></div>

CSS

.line {
    position: fixed;
    background: steelblue;
}

.line.top, .line.bottom {
    height: 5px;
    width: 100%;
}

.line.top {
    top: 0;
    left: 0;
}

.line.bottom {
    bottom: 0;
    right: 0;
}

.line.left, .line.right {
    height: 100%;
    width: 5px;
}

.line.left {
    bottom: 0;
    left: 0;
}

.line.right {
    top: 0;
    right: 0;
}

JavaScript

var duration = 100;

function setProgress(percent) {
    $(".top.line").animate({width: Math.min(percent, 25) * 4 + "%"}, duration);
    $(".right.line").delay(duration).animate({height: Math.min(percent - 25, 25) * 4 + "%"}, duration);
    $(".bottom.line").delay(duration * 2).animate({width: Math.min(percent - 50, 25) * 4 + "%"}, duration);
    $(".left.line").delay(duration * 3).animate({height: Math.min(percent - 75, 25) * 4 + "%"}, duration);
}

function go(n) {
    setProgress(n);
    $("#progress").text(~~n + "%");
    var increment = Math.random() * 10;
    if(n < 100) {
        setTimeout(function() { go(n + increment); }, duration * 4)
    }
}

go(0);