Progress

Native progress element for determinate or indeterminate work.

ブラウザー: Chrome 123+Firefox 121+Safari 17.5+
ティア: 0
圧縮後のサイズ: 93 B
強制レイアウトの上限: 0 ms
axe の上限: 0
SSR 対応: はい
公開された契約: テストハーネス

プレイグラウンド

Progress

Migration progress

React

CSS

Tailwind

import { Progress } from "@gunkin/uiify";

export default function Example() {
  return (
    <>
      <label htmlFor="migration-progress">Migration progress</label>
      <Progress className="" id="migration-progress" max={5} value={3} />
    </>
  );
}

import { Progress } from "@gunkin/uiify";

export default function Example() {
  return (
    <>
      <label htmlFor="migration-progress">Migration progress</label>
      <Progress
        className="block [inline-size:100%] [block-size:0.5rem] [accent-color:var(--primary)]"
        id="migration-progress"
        max={5}
        value={3}
      />
    </>
  );
}

/* app.css */

@layer reset, ui, app, tokens, base, demo, components, utilities, theme;

@import "@gunkin/uiify/styles/reset";

@import "@gunkin/uiify/components/behavior.css";

@import "@gunkin/uiify/styles/tokens";

@import "@gunkin/uiify/styles/tailwind";

@import "tailwindcss/utilities.css";

@theme { --spacing: 0.25rem; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; }

@source inline('block [inline-size:100%] [block-size:0.5rem] [accent-color:var(--primary)]');

@layer base { :root { --uiify-control-text: var(--text-sm); } @media (pointer: coarse) { :root { --uiify-control-text: var(--text-base); } } }

/* Authored animation and registered properties used by the Tailwind skin.
 * Visual rules belong in utility recipes; only at-rule definitions live here. */
@layer components {
  @keyframes uiify-presence-in {
    from {
      opacity: 0;
      scale: var(--presence-scale);
    }
  }
}

@layer components {
  @keyframes uiify-presence-out {
    to {
      opacity: 0;
      scale: var(--presence-scale);
    }
  }
}

@property --uiify-spinner-tail {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@property --uiify-spinner-length {
  syntax: "<angle>";
  inherits: false;
  initial-value: 36deg;
}

@layer components {
  @keyframes uiify-spinner-rotate {
    to {
      transform: rotate(360deg);
    }
  }
}

@layer components {
  @keyframes uiify-spinner-orbit {
    0% {
      --uiify-spinner-tail: 0deg;
      --uiify-spinner-length: 36deg;
    }

    50% {
      --uiify-spinner-tail: 90deg;
      --uiify-spinner-length: 324deg;
    }

    100% {
      --uiify-spinner-tail: 360deg;
      --uiify-spinner-length: 36deg;
    }
  }
}

@layer components {
  @keyframes uiify-skeleton-pulse {
    50% {
      opacity: 0.45;
    }
  }
}

@layer components {
  @keyframes uiify-skeleton-shimmer {
    to {
      background-position: -200% 0;
    }
  }
}

@layer components {
  @keyframes uiify-skeleton-reveal {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}

@property --candle-body-height {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

@property --candle-body-top {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --candle-slot {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 100%;
}

@property --candle-wick-height {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

@property --candle-wick-top {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --candle-x {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

@property --candle-scale {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

@property --line-y {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --line-prev-y {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --line-count {
  syntax: "<integer>";
  inherits: false;
  initial-value: 1;
}

@property --line-scale {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

@layer components {
  @keyframes uiify-otp-input-caret-blink {
    50% {
      opacity: 0;
    }
  }
}

使用例

Indeterminate work

Omit value when the amount of completed work is unknown.

Preparing files

import { Progress } from "@gunkin/uiify";

export default function Example() {
  return (
    <>
      <label htmlFor="file-progress">Preparing files</label>
      <Progress id="file-progress" />
    </>
  );
}

API

`Progress`

Prop	型	既定値	説明
`value`	`number`	—	Current progress value; omit it for indeterminate progress.
`max`	`number`	`1`	Maximum progress value accepted by the native element.
`Accessible name`*	`native <label> / aria-label / aria-labelledby`	—	Provide an accessible name with aria-label, aria-labelledby, or a native label.
`className`	`string`	—	Class applied to the native progress element.
`style`	`CSSProperties`	—	Native progress element styles.
`ref`	`Ref<HTMLProgressElement>`	—	Ref forwarded to the native progress element.

キーボード

キー	操作

アクセシビリティ

Native progress element. Associate a label or accessible name; omitting value exposes indeterminate progress. Browser rendering varies, and UIify does not simulate updates or announce them.

スタイリングのフック

data-uiify-progress

フレームワーク

スタイル

テーマ

言語

Progress

プレイグラウンド

Progress

使用例

Indeterminate work

API

`Progress`

キーボード

アクセシビリティ

スタイリングのフック