JSFiddle - React, Tailwind, and code Playground

by bluey

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/ui-darkness/jquery-ui.css">
<div id="progressbar" style='height: 100px;'></div>
<div id="overlay">
 <img src='http://i1097.photobucket.com/albums/g350/laluxaeterna/amen-break.jpg' style='height: 100px; width: 900px; '/>
</div>
<button id='click' style='position: absolute; z-index: 11;'>GO</button>

CSS

#overlay {
  background-color: black;
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  opacity: 0.2; /* also -moz-opacity, etc. */
  z-index: 10;
}

JavaScript

var x=0;

function derp() {
    $(function() {
        $( "#progressbar" ).progressbar({
            value: x
        });
    });
}

derp();

$('#click').click(function(){
             x+=1; 
          // alert(x);
            derp();            
});