Login
Docs
Ring

Ring

A ring that can be used to indicate a loading state or progress.

Loading...

Installation

Copy and paste the following code into your project.

import React from "react"
 
export function Ring() {
  return (
    <div className="flex h-[350px] w-full items-center justify-center bg-gradient-to-b from-indigo-800 to-indigo-950">
      <div
        className="absolute mx-auto my-0 h-[300px] w-[300px] animate-rotate rounded-full"
        style={{
          left: "calc(50% - 150px)",
          backgroundImage:
            "linear-gradient(135deg, #FEED07 0%, #FE6A50 5%, #ED00AA 15%, #2FE3FE 50%, #8900FF 100%)",
        }}
      ></div>
      <div
        className="absolute mx-auto my-0 h-[280px] w-[280px] rounded-full bg-gradient-to-b from-indigo-800 to-indigo-950"
        style={{
          left: "calc(50% - 140px)",
        }}
      ></div>
    </div>
  )
}

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: {
        rotateCounterClockwise: {
          "0%": {
            transform: "rotate(0)",
          },
          to: {
            transform: "rotate(-360deg)",
          },
        },
      },
      animation: {
        rotate: "rotateClockwise 2s infinite",
      },
    },
  },
}

Usage

import Ring from "@/components/ui/ring"
<Ring />
RadarStars