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!

All versions