Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
    <head>
        <script src="https://code.jquery.com/jquery.min.js"></script>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <title>Inicio</title>
        <script type="text/javascript" src="js/spin.min.js"></script> 
        <script type="text/javascript">
            $(document).ready(function() {
                var opts = {
                  lines: 13 // The number of lines to draw
                , length: 28 // The length of each line
                , width: 14 // The line thickness
                , radius: 42 // The radius of the inner circle
                , scale: 1 // Scales overall size of the spinner
                , corners: 1 // Corner roundness (0..1)
                , color: '#000' // #rgb or #rrggbb or array of colors
                , opacity: 0.25 // Opacity of the lines
                , rotate: 0 // The rotation offset
                , direction: 1 // 1: clockwise, -1: counterclockwise
                , speed: 1 // Rounds per second
                , trail: 60 // Afterglow percentage
                , fps: 20 // Frames per second when using setTimeout() as a fallback for CSS
                , zIndex: 2e9 // The z-index (defaults to 2000000000)
                , className: 'spinner' // The CSS class to assign to the spinner
                , top: '50%' // Top position relative to parent
                , left: '50%' // Left position relative to parent
                , shadow: false // Whether to render a shadow
                , hwaccel: false // Whether to use hardware acceleration
                , position: 'absolute' // Element positioning
                };
                // $("body").append("<div id=\"spinner\"></div>");
                // var target = $("#spinner");
                // var spinner = new Spinner(opts).spin();
                // target.append(spinner.el);
​
                // $(window).load(function() {
                //     setTimeout(function(){
                //         $("#spinner").fadeOut('slow/', function() {
                //         spinner.stop();    
                //         });
                //     }, 1000);
                // });
            });
        </script>
        <style type="text/css">
            .container-fluid {
                position: relative;
                padding: 0;
                margin: 0;
            }
            .header{
                position: relative;
                max-height: 920px;
                height: 100%;
            }
            .header_layer{
                position: relative;
                top: 0px;
                left: 0px;
                width: 100%;
                height: 100px;
                background-color: darkgrey;
                z-index: 100;
            }
            .img_header{
                position: relative;
                top: 0px;
                left: 0px;
                width: 100%;
                z-index: 99;
            }
        </style>
    </head>
<body>
    <div class="container-fluid">
        <div class="header col-md-12">
            <div class="header_layer"></div>
            <img src="http://placehold.it/350x150" class="img-responsive img_header">          
        </div>
    </div>
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers