JSFiddle - React, Tailwind, and code Playground

by toddwprice

HTML

<input type="text" id="theMessage" value="Loading" /><input type="button" id="show" value="Show" />
<input type="button" id="hide" value="Hide" />

<div id="progress">
    <ul class="loading">
        <li class="msg">Loading</li>
        <li class="dot one"></li>
        <li class="dot two"></li>
        <li class="dot three"></li>
    </ul>
</div>

CSS

body {
    padding: 25px;
    font-size: 16px;
    font-family: Arial,Helvetica;
}


#progress 
{
    -webkit-border-radius: 10px;
    background-color: rgba(67,53,49,.6);
    color: white;
    font-size: 18px;
    font-weight: bold;
    height: 80px;
    line-height: 80px;
    margin: 80px auto;
    text-align: center;
    width: 200px;
    -webkit-transition: opacity 0.15s ease-in-out;
    opacity: 0;
}

.msg {
    display: inline-block;
}

.dot {
    display: inline-block;
    border-radius: 1px;
    background-color: #fff;
    -webkit-animation: dot 1.5s infinite;
    margin-right: 4px;
}

.one {
    -webkit-animation-delay: 0.0s;
}

.two {
    -webkit-animation-delay: 0.5s;
}

.three {
    -webkit-animation-delay: 1.0s;
}

@-webkit-keyframes dot {
     0% { width: 3px; height: 3px; margin-right: 4px; }
    25% { width: 5px; height: 5px; margin-right: 2px; }
    33% { width: 3px; height: 3px; margin-right: 4px; }
   100% { width: 3px; height: 3px; margin-right: 4px; }
}

JavaScript

$('#show').click(function() {
    $('#progress').css('opacity', '1').find('.msg').text($('#theMessage').val());
});

$('#hide').click(function() {
    $('#progress').css('opacity', '0');
});