Progress

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

export const Page = () => {
  return (
    <Progress value={50} max={100}>
      50%
    </Progress>
  );
};

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

export const Page = () => {
  return (
    <div className="flex w-full flex-col gap-8">
      <Progress value={50} max={100} meterBg="bg-primary-500" />
      <Progress value={50} max={100} meterBg="bg-secondary-500" />
      <Progress value={50} max={100} meterBg="bg-tertiary-500" />
    </div>
  );
};

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

export const Page = () => {
  return (
    <div className="flex w-full flex-col gap-8">
      <Progress value={50} max={100} height="h-1" />
      <Progress value={50} max={100} />
      <Progress value={50} max={100} height="h-4" />
    </div>
  );
};

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

export const Page = () => {
  return <Progress value={null} />;
};

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

export const Page = () => {
  return (
    <>
      <Progress value={null} meterAnimate="my-custom-animation" />

      {/* RECOMMENDED: add these styles to your global stylesheet. */}
      <style>{`
                    .my-custom-animation {
                        animation: my-custom-animation 2s ease-in-out infinite;
                    }
                    @keyframes my-custom-animation {
                        0% {
                            translate: -100%;
                        }
                        25% {
                            scale: 1;
                        }
                        50% {
                            scale: 0.25 1;
                            translate: 50%;
                        }
                        75% {
                            scale: 1;
                        }
                        100% {
                            translate: 200%;
                        }
                    }
            `}</style>
    </>
  );
};

<progress class="progress" value="50" max="100"></progress>