JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nprogress/0.2.0/nprogress.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.17.1/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nprogress/0.2.0/nprogress.min.js"></script>
<button onclick="loadAjaxRequest()">Press Me!</button>
JavaScript
NProgress.configure({
easing: 'linear',
speed: 350
});
axios.defaults.transformRequest.push(function (data, headers) {
NProgress.start();
return data;
})
axios.defaults.transformResponse.push(function (data, headers) {
NProgress.done();
return data;
})
function getRandomArbitrary(min, max) {
return Math.random() * (max - min) + min;
}
function loadAjaxRequest()
{
axios.get('https://www.json-generator.com/api/json/get/cgnfvfmSJK?indent=2')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
}