Progress

A customizable progress bar component for tracking task progression.

Galaxy Progress Bar

A default galactic progress bar.

Preview

import React from "react";

const ProgressBar = () => {
  return (
    <div>
      <h2 className="sr-only">Steps</h2>

      <div className="w-[400px]">
        <div className="overflow-hidden w-full rounded-full bg-gray-200">
          <div className="h-2 w-1/2 rounded-full bg-black"></div>
        </div>

        <ol className="mt-4 grid grid-cols-3 text-sm font-medium text-gray-500">
          <li className="flex items-center justify-start text-black sm:gap-1.5">
            <svg
              className="size-6 sm:size-5"
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
              strokeWidth="2"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                d="M10 6H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2h-5m-4 0V5a2 2 0 114 0v1m-4 0a2 2 0 104 0m-5 8a2 2 0 100-4 2 2 0 000 4zm0 0c1.306 0 2.417.835 2.83 2M9 14a3.001 3.001 0 00-2.83 2M15 11h3m-3 4h2"
              />
            </svg>
          </li>

          <li className="flex items-center justify-center text-black sm:gap-1.5">
            <svg
              className="size-6 sm:size-5"
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
              strokeWidth="2"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
              />
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
              />
            </svg>
          </li>

          <li className="flex items-center justify-end sm:gap-1.5">
            <svg
              className="size-6 sm:size-5"
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
              strokeWidth="2"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"
              />
            </svg>
          </li>
        </ol>
      </div>
    </div>
  );
};

export default ProgressBar;

Usage Example

import React from "react";
import ProgressBar from "./components/comp/ProgressBar/GalaxyProgressBar";

const App = () => {
  return (
    <div>
      <ProgressBar />
    </div>
  );
};

export default App;

Earth Progress Bar

A progress bar showing progression on the earth surface.

Preview

import React from "react";

const ProgressBar = () => {
  return (
    <div className="w-[400px] mt-4 h-2 overflow-hidden rounded-full bg-gray-200">
      <div className="h-full w-2/3 rounded-full bg-black"></div>
    </div>
  );
};

export default ProgressBar;

Usage Example

import React from "react";
import ProgressBar from "./components/comp/ProgressBar/EarthProgressBar";

const App = () => {
  return (
    <div>
      <ProgressBar />
    </div>
  );
};

export default App;

Mars Progress Bar

A progress bar showing progression on mars.

Preview

Details

Address

Payment

import React from "react";
import { FaCheckCircle } from "react-icons/fa";

const ProgressBar = () => {
  return (
    <div className="my-5 px-4">
      <div className="relative w-[400px] mt-4 h-1.5 bg-gray-200 rounded-lg">
        <div className="absolute inset-0 flex justify-between -top-4">
          <div className="flex flex-col items-start flex-1">
            <div className="w-9 h-9 p-2 rounded-full bg-black flex justify-center items-center mb-2">
              <FaCheckCircle size={20} className="text-white" />
            </div>
            <span className="text-xs font-medium text-black">Details</span>
          </div>

          <div className="flex flex-col items-center flex-1">
            <div className="w-9 h-9 p-2 rounded-full bg-black flex justify-center items-center mb-2">
              <FaCheckCircle size={20} className="text-white" />
            </div>
            <span className="text-xs font-medium text-black">Address</span>
          </div>

          <div className="flex flex-col items-end flex-1">
            <div className="w-9 h-9 p-2 rounded-full bg-gray-400 flex justify-center items-center mb-2">
              <FaCheckCircle size={20} className="text-white" />
            </div>
            <span className="text-xs font-medium text-gray-500">Payment</span>
          </div>
        </div>
      </div>
    </div>
  );
};

export default ProgressBar;

Usage Example

import React from "react";
import ProgressBar from "./components/comp/ProgressBar/MarsProgressBar";

const App = () => {
  return (
    <div>
      <ProgressBar />
    </div>
  );
};

export default App;