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: #aaa;
}

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

.roof .bar{
    width:50%;
    height: 5px;
    margin:0;
    position:relative;
    -webkit-box-shadow: rgba(0,0,0,0.3) 0px 1px 0px,rgba(255,255,255,0.3) 0px -1px 0px inset;
}

.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 6px 1px;
	box-shadow: #0088CC 1px 0 6px 1px;
	-moz-border-radius: 100%;
	-webkit-border-radius: 100%;
	border-radius: 100%;
}

JavaScript

(function ( $ ) {
 
    /*$.fn.greenify = function( options ) {
 
        // This is the easiest way to have default options.
        var settings = $.extend({
            // These are the defaults.
            color: "#556b2f",
            backgroundColor: "white"
        }, options );
 
        // Greenify the collection based on the settings variable.
        return this.css({
            color: settings.color,
            backgroundColor: settings.backgroundColor
        });
    };*/
    
    $.fn.roof = function(options){
        
        var default = {
            state: 'info'
        }
        
        var methods = {
            init: function(options){
                default = $.extend(default,options);
            },
            show: showBar,
            hide: hideBar
        };
        
        if(settings[options]){
            return methods[options].apply(this, Array.prototype.slice.call(arguments,1);
        } else if(typeof settings[options] == 'objects' || !options){
            return methods.init.apply(this, arguments);
        } else {
            $.error( 'Method ' +  method + ' does not exist on jQuery.tooltip' );
        }

        
        function showBar(){
            $('.roof .bar').css('width','0%');
            $('.roof').css('display','block');
        }
        
        function hideBar(para){
            console.log(para);
        }
        
        
        var body = 
            $('<div/>', {
                class:"bar "+ ((settings.state) ? "bar-"+settings.state:""),
            }).append($("<span/>"));
    
        
       $('<div/>',{
            class:"progress progress-striped active roof",
        }).append(body).appendTo('body');
               
                
    }
 
}( jQuery ));


$('body').roof();
$('body').roof('hide',123);