JSFiddle - React, Tailwind, and code Playground

by alivedise

HTML

<script src="http://staging.javascriptmvc.com/steal/steal.js"></script>
<div id="timeline"></div>
<div id="result"></div>

CSS

#timeline {
    width: 100px;
    height: 30px;
    background: #0186d1;
    border: grey;
    position: absolute;
}

JavaScript

steal('jquery/dom/fixture', function(){
    $('#result').text('processing');

    //Set ajax delay as random number
    $.fixture.delay = 1000*parseInt(10*Math.random(), 10);
    
    //Set fake.json as paeudo ajax response url
    $.fixture('fake.json', function(){
        return { result: 'done' };
    });
    
    //Wait until ajax and animation all done
    $.when($('#timeline').animate({ left: 100 }),  $.ajax({
        url: 'fake.json', dataType: 'json'
    })).done(function(){
        $('#result').text('done!');
    });
});