JSFiddle - React, Tailwind, and code Playground

by shahabganji

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nprogress/0.2.0/nprogress.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/nprogress/0.2.0/nprogress.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/nanobar/0.4.2/nanobar.min.js"></script>
<div class="container">

  <br />
  <br />
  <button class="btn btn-success" type="button" onclick="nanobar.go(10);">Start</button>
  <button class="btn btn-primary" type="button" onclick="nanobar.go(100);">Done</button>

</div>

<br />
<hr />

<div id="main" style="width: 300px;">

  <button class="btn btn-success" type="button" onclick="np2.start();">Start</button>
  <button class="btn btn-primary" type="button" onclick="np2.done();">Done</button>

</div>

CSS

.nanobar {
  width: 100%;
  height: 5px;
  z-index: 9999;
  top: 0
}

.bar {
  width: 0;
  height: 100%;
  transition: height .3s;
  background: var(--info) !important
}

JavaScript

var nanobar = new Nanobar();
// nanobar.go(100);