Radial Progress#

import { component, render } from 'sigx';
import { RadialProgress } from '@sigx/daisyui';

const Demo = component(() => {
    return () => (
        <RadialProgress value={70}>70%</RadialProgress>
    );
});

render(<Demo />, "#sandbox");

import { component, render } from 'sigx';
import { RadialProgress, Row } from '@sigx/daisyui';

const Demo = component(() => {
    return () => (
        <Row gap="4">
            <RadialProgress value={60} color="primary">60%</RadialProgress>
            <RadialProgress value={70} color="secondary">70%</RadialProgress>
            <RadialProgress value={80} color="accent">80%</RadialProgress>
            <RadialProgress value={90} color="neutral">90%</RadialProgress>
        </Row>
    );
});

render(<Demo />, "#sandbox");

import { component, render } from 'sigx';
import { RadialProgress, Row } from '@sigx/daisyui';

const Demo = component(() => {
    return () => (
        <Row gap="4">
            <RadialProgress value={50} color="info">50%</RadialProgress>
            <RadialProgress value={70} color="success">70%</RadialProgress>
            <RadialProgress value={85} color="warning">85%</RadialProgress>
            <RadialProgress value={40} color="error">40%</RadialProgress>
        </Row>
    );
});

render(<Demo />, "#sandbox");

import { component, render } from 'sigx';
import { RadialProgress, Row } from '@sigx/daisyui';

const Demo = component(() => {
    return () => (
        <Row gap="4" align="center">
            <RadialProgress value={70} size="4rem">70%</RadialProgress>
            <RadialProgress value={70} size="6rem">70%</RadialProgress>
            <RadialProgress value={70} size="8rem">70%</RadialProgress>
            <RadialProgress value={70} size="12rem">70%</RadialProgress>
        </Row>
    );
});

render(<Demo />, "#sandbox");

import { component, render } from 'sigx';
import { RadialProgress, Row } from '@sigx/daisyui';

const Demo = component(() => {
    return () => (
        <Row gap="4">
            <RadialProgress value={70} thickness="2px">thin</RadialProgress>
            <RadialProgress value={70} thickness="4px">4px</RadialProgress>
            <RadialProgress value={70}>default</RadialProgress>
            <RadialProgress value={70} thickness="1rem">thick</RadialProgress>
        </Row>
    );
});

render(<Demo />, "#sandbox");

import { component, render } from 'sigx';
import { RadialProgress, Row } from '@sigx/daisyui';

const Demo = component(() => {
    return () => (
        <Row gap="4">
            <RadialProgress
                value={75}
                color="primary"
                class="bg-primary text-primary-content border-primary border-4"
            >
                75%
            </RadialProgress>
            <RadialProgress
                value={90}
                color="success"
                class="bg-success text-success-content border-success border-4"
            >
                90%
            </RadialProgress>
        </Row>
    );
});

render(<Demo />, "#sandbox");

import { component, render } from 'sigx';
import { RadialProgress, Row } from '@sigx/daisyui';

const Demo = component(() => {
    return () => (
        <Row gap="4">
            <RadialProgress value={0}>0%</RadialProgress>
            <RadialProgress value={25}>25%</RadialProgress>
            <RadialProgress value={50}>50%</RadialProgress>
            <RadialProgress value={75}>75%</RadialProgress>
            <RadialProgress value={100}>100%</RadialProgress>
        </Row>
    );
});

render(<Demo />, "#sandbox");