Docs
Loading dots

Loading dots

A circular visual for conveying a percentage.

Default

Installation

Copy and paste the following code into your project.

import React from "react"
 
interface LoadingDotsProps {
  size?: number
  children?: React.ReactNode
}
 
const LoadingDots: React.FC<LoadingDotsProps> = ({ size = 2, children }) => {
  return (
    <span
      className="inline-flex items-center"
      style={{
        // @ts-ignore
        "--loading-dots-size": `${size}px`,
      }}
    >
      {children && <span className="mr-3 inline-block">{children}</span>}
      <span className="mx-[1px] inline-block h-[var(--loading-dots-size)] w-[var(--loading-dots-size)] animate-loading-dots-blink rounded-full bg-gray-900"></span>
      <span className="mx-[1px] inline-block h-[var(--loading-dots-size)] w-[var(--loading-dots-size)] animate-loading-dots-blink rounded-full bg-gray-900 delay-200"></span>
      <span className="mx-[1px] inline-block h-[var(--loading-dots-size)] w-[var(--loading-dots-size)] animate-loading-dots-blink rounded-full bg-gray-900 [animation-delay:400ms]"></span>
    </span>
  )
}
 
export { LoadingDots }

Update the import paths to match your project setup.

Update tailwind.config.js

Add the following animations to your tailwind.config.js file:

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      keyframes: {
        "loading-dots-blink": {
          "0%, 100%": { opacity: "0.2" },
          "20%": { opacity: "1" },
        },
      },
      animation: {
        "loading-dots-blink": "loading-dots-blink 1400ms both infinite",
      },
    },
  },
}

With text

Loading