JSFiddle - React, Tailwind, and code Playground

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">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.min.js"></script>

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: 10px;
  }

  .progress {
    height: 2px;
  }

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

JavaScript

var splashHtml = '<div class="progress">' +
        '<div class="mybar" role="bar">' +
    '</div>';

NProgress.configure({
    template: splashHtml
});

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