I found inspiration in moredemons's solution and utilized CSS triangles. This method allows for easy customization of colors, sizes, and animation rates without having to delve into the JS code. It simplifies the process by removing the need for complex if/else statements for every state.
The advantage of using a programmatic approach instead of a gif is the flexibility it offers in modifying various visual aspects.
Initial HTML All triangles hidden
<div id ="ct" >
<div class="triangle triangle-nw triangle-hide-tr triangle-hide-bl"></div>
<div class="triangle triangle-ne triangle-hide-tl triangle-hide-br"></div>
<br/>
<div class="triangle triangle-sw triangle-hide-tl triangle-hide-br"></div>
<div class="triangle triangle-se triangle-hide-tr triangle-hide-bl" ></div>
</div>
CSS
.triangle {
font-size:0;
border: 50px solid transparent;
display: inline-block;
width: 0;
height: 0;
margin:0;
padding: 0;
}
.triangle-se {
border-color: red red blue blue;
}
.triangle-sw {
border-color: red blue blue red;
}
.triangle-nw {
border-color: blue blue red red;
}
.triangle-ne {
border-color: blue red red blue;
}
.triangle-hide-tl {
border-top-color: transparent;
border-left-color: transparent;
}
.triangle-hide-tr {
border-top-color: transparent;
border-right-color: transparent;
}
.triangle-hide-br {
border-bottom-color: transparent;
border-right-color: transparent;
}
.triangle-hide-bl {
border-bottom-color: transparent;
border-left-color: transparent;
}
JS
setInterval((function(){
var index = 0;
// Which square is going to be modified in each stage (16 stages)
var map = [3,3,2,2,0,0,1,1,3,3,2,2,0,0,1,1];
// The clases to add and remove
var classesToChange = ['tr', 'bl', 'br', 'tl', 'bl', 'tr', 'tl', 'br'];
return function() {
var el = $('#ct div.triangle').eq(map[index]);
if (index < 8) {
// Showing pieces
el.removeClass('triangle-hide-' + classesToChange[index] );
} else {
// Hiding pieces
el.addClass('triangle-hide-' + classesToChange[index - 8] );
}
index++;
if (index >= 16) {
index = 0;
}
};
})(), 200);