JSFiddle - React, Tailwind, and code Playground

HTML

<div id="animated">
    Start
</div>

CSS

#animated {
    width: 1000px;
    height: 479px;
    
    padding: 5px;
    font: bold 1em arial, sans-serif;
    color: #aaa;
    border: 2px solid #ddd;    
    cursor: pointer;
}

#animated.go {
    background-position: 0 0;
    background-repeat: no-repeat; 
    color: red;  
}

JavaScript

$('#animated').click(function() {
    
    var $div = $(this);
    $div.toggleClass('go');
    
    if ($div.hasClass('go')) {
        
        var img = document.createElement('img');
        img.src = "http://fullahead.org/work/stackoverflow/animated.gif?p" + new Date().getTime();
        $div.text('Loading...');
        
        $(img).load(function(){
            $div.css({backgroundImage: "url("+img.src+")"});
            $div.text('Stop');
        });
        

        
    } else {
       $div.css({backgroundImage: "none"});
       $div.text('Start');
    }
})