JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <hr>
  <hr>
  <hr>
  <hr>
</div>

CSS

.container {
    font-size: 0;
    width: 200px;
}
hr {
    border: 50px solid transparent;
    display: inline-block;
}

JavaScript

var posib = [
    ['left','bottom','top','right'],
    ['left','top','bottom','right'],
    ['right','bottom','top','left'],
    ['top','right','bottom','left']
];
$.fn.fill = function( full, undo ){
    var ind = $('hr').index(this);
    var cur = posib[ind];
    this.css( 'border-'+cur[0]+'-color', undo ? 'transparent' : 'yellow' );
    this.css( 'border-'+cur[1]+'-color', undo ? 'transparent' : 'yellow' );
    this.css( 'border-'+cur[2]+'-color', full ? 'blue' : 'transparent' );
    this.css( 'border-'+cur[3]+'-color', full ? 'blue' : 'transparent' );
}
function cycle(){
    $('<div />').animate({ borderSpacing: 10000 }, {
    duration: 1500,
    easing: 'linear',
    step: function(now,fx){
        if (fx.pos < 1/17) return;
        if (fx.pos < 2/17) { $('hr').eq(3).fill(); return; }
        if (fx.pos < 3/17) { $('hr').eq(3).fill(true); return; }
        if (fx.pos < 4/17) { $('hr').eq(2).fill(); return; }
        if (fx.pos < 5/17) { $('hr').eq(2).fill(true); return; }
        if (fx.pos < 6/17) { $('hr').eq(0).fill(); return; }
        if (fx.pos < 7/17) { $('hr').eq(0).fill(true); return; }
        if (fx.pos < 8/17) { $('hr').eq(1).fill(); return; }
        if (fx.pos < 9/17) { $('hr').eq(1).fill(true); return; }
        if (fx.pos < 10/17) { $('hr').eq(3).fill(true,true); return; }
        if (fx.pos < 11/17) { $('hr').eq(3).fill(false,true); return; }
        if (fx.pos < 12/17) { $('hr').eq(2).fill(true,true); return; }
        if (fx.pos < 13/17) { $('hr').eq(2).fill(false,true); return; }
        if (fx.pos < 14/17) { $('hr').eq(0).fill(true,true); return; }
        if (fx.pos < 15/17) { $('hr').eq(0).fill(false,true); return; }
        if (fx.pos < 16/17) { $('hr').eq(1).fill(true,true); return; }
        if (fx.pos < 17/17) { $('hr').eq(1).fill(false,true); return; }
    },
        complete: cycle
});
}

// Start cycle
cycle();