Progress Ring

import { useState } from 'react';
import { ProgressRing } from '@skeletonlabs/skeleton-react';

export const Page = () => {
  const [value, setValue] = useState(25);
  const [max] = useState(100);

  return (
    <div className="grid grid-cols-1 gap-4 justify-center">
      {/* Progress */}
      <ProgressRing value={value} max={max} />
      {/* Range Input */}
      <input type="range" className="input max-w-32" value={value} onInput={(e) => setValue(e.currentTarget.valueAsNumber)} max={max} />
    </div>
  );
};

import { ProgressRing } from '@skeletonlabs/skeleton-react';

export const Page = () => {
  return (
    <div className="grid grid-cols-1 gap-4 justify-center">
      <ProgressRing value={25} max={100} showLabel />
    </div>
  );
};

import { ProgressRing } from '@skeletonlabs/skeleton-react';
import { ThermometerSun as IconThermometer } from 'lucide-react';

export const Page = () => {
  return (
    <ProgressRing value={60} max={100} meterStroke="stroke-error-500" strokeLinecap="butt">
      <IconThermometer size={48} />
    </ProgressRing>
  );
};

import { ProgressRing } from '@skeletonlabs/skeleton-react';

export const Page = () => {
  return <ProgressRing value={null} size="size-14" meterStroke="stroke-tertiary-600-400" trackStroke="stroke-tertiary-50-950" />;
};