Get started with nprogress CDN
MIT licensed
NProgress: lightweight plugin for customizable AJAX transition effects.
Tags:- progress
- load
- ajax
Stable version
Copied!
How to start using nprogress CDN
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nprogress/0.2.0/nprogress.min.css" />
<script src="https://cdn.cdnhub.io/nprogress/0.2.0/nprogress.min.js"></script>
<script>
NProgress.start();
document.addEventListener('DOMContentLoaded', () => {
NProgress.done();
});
document.addEventListener('click', (event) => {
if (event.target.matches('button[data-fetch]')) {
const button = event.target;
const url = button.dataset.url;
fetch(url)
.then((response) => response.json())
.then((data) => {
// Process the data here
NProgress.done();
})
.catch((error) => {
console.error('Error:', error);
NProgress.done();
});
}
});
</script>
<style>
body {
height: 100vh;
margin: 0;
}
</style>
</head>
<body>
<button data-url="https://jsonplaceholder.typicode.com/todos/1">Fetch data</button>
</body>
</html>
Copied!
Copied!
Copied!
Copied!