Get started with spinkit CDN

MIT licensed

Spinkit is a loading animation library for web projects, providing a customizable progress indicator.

Tags:
  • css
  • spinkit
  • spinner
  • loading
  • ui

Stable version

Copied!

How to start using spinkit CDN


<!DOCTYPE html>
<html>
<head>
  <link href="https://cdn.cdnhub.io/spinkit/2.0.1/spinkit.min.css" rel="stylesheet">
  <style>
    body {
      height: 100vh;
      margin: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      font-family: Arial, sans-serif;
    }
  </style>
</head>
<body>
  <button id="load-btn">Load Content</button>
  <div id="loader"></div>

  <script src="https://unpkg.com/[email protected]/build/spinkit.min.js"></script>
  <script>
    const loadBtn = document.getElementById('load-btn');
    const loader = document.getElementById('loader');

    loadBtn.addEventListener('click', () => {
      loader.innerHTML = Spinner.circle('blue');
      fetch('https://jsonplaceholder.typicode.com/todos/1')
        .then(response => response.json())
        .then(data => {
          loader.innerHTML = '';
          console.log(data);
        })
        .catch(error => {
          loader.innerHTML = Spinner.circle('red');
          console.error('Error:', error);
        });
    });
  </script>
</body>
</html>
Copied!
Copied!

All versions