JSFiddle - React, Tailwind, and code Playground

by juristr

HTML

<script src="http://ricostacruz.com/nprogress/nprogress.js"></script>
<link rel="stylesheet" href="http://ricostacruz.com/nprogress/nprogress.css">
<link rel="stylesheet" href="https://rawgithub.com/twbs/bootstrap/master/dist/css/bootstrap.css">

CSS

.splash {
    position:absolute;
    top:40%;
    left:0;
    right:0;
    margin: auto;
  }

  .splash img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: 100px;
    width: 100px;
  }

  .card {
        background-color: #f7f7f7;
        padding: 20px 25px 15px;
        margin: 0 auto 25px;
        width: 380px;
        -moz-border-radius: 2px;
        -webkit-border-radius: 2px;
        border-radius: 2px;
        -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
        -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
        box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
  }

  .mybar {
      background: #29d;
      height:2px;
  }

  .progress {
      height: 2px;
  }

  .spinner-icon {
      position: absolute;
      right: 20px;
  }

JavaScript

var splashHtml = '<div class="splash card">' +
    '<div role="spinner">' +
        '<div class="spinner-icon"></div>' +
    '</div>' +
    '<img class="img-circle" src="https://ssl.gstatic.com/accounts/ui/avatar_2x.png">' +
    '<p class="lead" style="text-align:center">Please wait...</p>' +
    '<div class="progress">' +
        '<div class="mybar" role="bar">' +
    '</div>' +
    '</div>' +
'</div>';

NProgress.configure({
    template: splashHtml
});

$(function(){
   NProgress.start(); 
});