JSFiddle - React, Tailwind, and code Playground

by colintoh

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css">
<span>test</span>

<!--<div class="progress progress-striped active roof">
  <div class="bar bar-info" style="width: 20%;">
      <span></span> 
  </div>
</div>-->

CSS

body {
    /* background: ; */
}

.roof {
    position:fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: none;
}

.roof .bar{
    width:0%;
    height: 5px;
    margin:0;
    position:relative;
}

.roof span{
    width:50px;
    height: 100%;
    display:block;
    position:absolute;
    top:0;
    right:0;
   -moz-box-shadow: #0088CC 1px 0 6px 1px;
	-ms-box-shadow: #0088CC 1px 0 6px 1px;
	-webkit-box-shadow: #0088CC 1px 0 10px 1px;
	box-shadow: #0088CC 1px 0 10px 1px;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
    opacity: 0.6;
}

.roof .bar-success span{
  -moz-box-shadow: rgb(88,185,87) 1px 0 6px 1px;
	-ms-box-shadow: rgb(88,185,87) 1px 0 6px 1px;
	-webkit-box-shadow: rgb(88,185,87) 1px 0 10px 1px;
	box-shadow: rgb(88,185,87) 1px 0 10px 1px;
}

.roof .bar-warning span{
  -moz-box-shadow: rgb(242,172,67) 1px 0 6px 1px;
	-ms-box-shadow: rgb(242,172,67) 1px 0 6px 1px;
	-webkit-box-shadow:rgb(242,172,67) 1px 0 10px 1px;
	box-shadow: rgb(242,172,67) 1px 0 10px 1px;
}

.roof .bar-danger span{
  -moz-box-shadow: rgb(219,82,75) 1px 0 6px 1px;
	-ms-box-shadow: rgb(219,82,75) 1px 0 6px 1px;
	-webkit-box-shadow:rgb(219,82,75) 1px 0 10px 1px;
	box-shadow: rgb(219,82,75) 1px 0 10px 1px;
}

JavaScript

/*!
 * jQuery lightweight plugin boilerplate
 * Original author: @ajpiano
 * Further changes, comments: @addyosmani
 * Licensed under the MIT license
 */


// the semi-colon before the function invocation is a safety 
// net against concatenated scripts and/or other plugins 
// that are not closed properly.
;(function ( $, window, document, undefined ) {
    
    // undefined is used here as the undefined global 
    // variable in ECMAScript 3 and is mutable (i.e. it can 
    // be changed by someone else). undefined isn't really 
    // being passed in so we can ensure that its value is 
    // truly undefined. In ES5, undefined can no longer be 
    // modified.
    
    // window and document are passed through as local 
    // variables rather than as globals, because this (slightly) 
    // quickens the resolution process and can be more 
    // efficiently minified (especially when both are 
    // regularly referenced in your plugin).

    // Create the defaults once
    var pluginName = 'roof',
        defaults = {
            state: 'info',
          inchSpeed: 500,
        };

    // The actual plugin constructor
    function Plugin( element, options ) {
        this.element = element;

        // jQuery has an extend method that merges the 
        // contents of two or more objects, storing the 
        // result in the first object. The first object 
        // is generally empty because we don't want to alter 
        // the default options for future instances of the plugin
        
        this.options = $.extend( {}, defaults, options) ;
        
        this._defaults = defaults;
        this._width = 0;
        this._name = pluginName;
        
        this.init();
      
    }

    Plugin.prototype.init = function (width) {
        // Place initialization logic here
        // You already have access to the DOM element and
        // the options via the instance, e.g. this.element 
        // and this.options
//       this.show();
        var...