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">
			{/* Progress */}
			<ProgressRing value={value} max={max} />
			{/* Range Input */}
			<input type="range" className="input" value={value} onInput={(e) => setValue(e.currentTarget.valueAsNumber)} max={max} />
		</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 strokeWidth={100} size="size-14" meterStroke="stroke-tertiary-600-400" trackStroke="stroke-tertiary-50-950" />;
};