JSFiddle - React, Tailwind, and code Playground

by matox

HTML

<body>
    <div id="progress-info">
      <ul>
            <li>Message 1..</li>
            <li>Message 2..</li>
            <li>Message 3..</li>
            <li>Message 4..</li>
            <li>Message 5..</li>
            <li>...</li>
      </ul>
    </div>
</body>

JavaScript

function createList(elem) {
    
    elem.hide(); // Hide every list items at the start
    
    return elem; // Shuffle the the list items
    
}

function printList(ndx) { // Fade in and out the actual list item
    
    $("div#progress-info")
        .find("ul li")
        .eq(ndx)
        .fadeIn(500)
        .delay(1000);
    
}

function executeList(elem) {
    
    var $newElem = createList(elem); // Create and shuffle the elements
    var noe = elem.length; // Get the number of elements
    var $count = 0; // Index of the actual list item
    
    printList($count); // Launched at start
    
    var $delay = setInterval(function() { // delay the function
        $count++;
        printList($count); // print out in loop

        if ($count > noe -1 ) { // If it's the last list item
            clearInterval($delay); // Reset the interval
            executeList($newElem); // Execute the whole process again...
        }
        
    }, 2775); // The extra 0025 ms is to ensure that all the animations have the time to complete before the loop start again
    
}

$(function() { // Waiting for the DOM ... equivalent to $(document).ready(function(){});
    
    var lis = $("div#progress-info").find("ul li");
    
    executeList(lis);
    
});