JSFiddle - React, Tailwind, and code Playground

HTML

<input id="login-user" type="text" placeholder="input number">
<input type="button" id="login-button" value="Connect"></input>
<br>
<div id="x00srch-progress"></div><br>
<div id="x00srch-status-current"></div>

CSS

body {
    margin:0;
    padding:0
}
div#x00srch-progress {
    height:30px;
    background:#0F0;
}

JavaScript

$('#login-button').click(function () {
    if ($('#login-user').val() != '') {

        $('#x00srch-status-current').html('Connecting...');
        $('#x00srch-progress').width('0%').animate({
            width: "100%"
        }, {
            duration: 2000,
            step: function (n, fx) {
                var status = "Connecting...";
                status = n >= 50 ? "Getting results..." : status;
                status = n >= 82 ? "The results will come up..." : status;
                $('#x00srch-status-current').html(status);
            }
        });   
        
    } else {
        var status = "only numbers accepted";
        $('#x00srch-status-current').html(status);
    }

});