倒计时 / Countdown

常用于活动、发布节奏与任务期限提醒。

数字滚动

用于大屏或关键指标提示的滚动数字。

关键节点倒计时

搭配动效强调剩余时间。

00:00:5432105432105432105432109876543210987654321098765432109876543210

示例代码

"use client";

const targetMs = Date.now() + 30 * 60 * 1000;
const countdown = useCountdown(targetMs);

<div className="flex items-center gap-2 text-3xl font-semibold tabular-nums leading-none">
  <span className="inline-flex min-w-[52px] justify-center rounded-xl border border-border bg-muted px-3 py-2">
    {String(countdown.hours).padStart(2, "0")}
  </span>
  <span className="text-muted-foreground">:</span>
  <span className="inline-flex min-w-[52px] justify-center rounded-xl border border-border bg-muted px-3 py-2">
    {String(countdown.minutes).padStart(2, "0")}
  </span>
  <span className="text-muted-foreground">:</span>
  <span className="inline-flex min-w-[52px] justify-center rounded-xl border border-border bg-muted px-3 py-2">
    <RollingSeconds value={countdown.seconds} />
  </span>
</div>

基础倒计时

展示数字分段、状态与强调色。

版本发布倒计时

准备好发布说明与公告。

加载中

今晚数据同步

同步期间暂停批量导入。

加载中

示例代码

"use client";

const targetMs = Date.now() + 2 * 60 * 60 * 1000;

<CountdownDigits targetMs={targetMs} highlight />

紧凑列表

用于列表或待办项的行内倒计时。

渠道广告下线

运营团队

加载中

数据模型同步

数据团队

加载中

客户回访任务

客户成功

加载中

示例代码

"use client";

const targetMs = Date.now() + 45 * 60 * 1000;

<CompactCountdown targetMs={targetMs} />

可重置倒计时

结合按钮控制节奏的倒计时示例。

客服响应 SLA

重置到 15 分钟倒计时。

加载中

示例代码

"use client";

const [targetMs, setTargetMs] = useState(Date.now() + 15 * 60 * 1000);

<CountdownDigits targetMs={targetMs} />
<Button variant="outline" onClick={() => setTargetMs(Date.now() + 15 * 60 * 1000)}>
  重置 15 分钟
</Button>
<Button onClick={() => setTargetMs(Date.now() + 60 * 60 * 1000)}>续时 1 小时</Button>

环形与进度条

通过环形与进度条强化节奏感。

加载中

活动剩余 30 分钟

批处理任务

当前批次剩余时间

剩余时间--:--:--

自动续期运行中

示例代码

"use client";

const totalMs = 30 * 60 * 1000;
const targetMs = Date.now() + totalMs;

<ProgressCountdown targetMs={targetMs} totalMs={totalMs} />

Loading dashboard...

倒计时 / Countdown

常用于活动、发布节奏与任务期限提醒。

数字滚动

用于大屏或关键指标提示的滚动数字。

关键节点倒计时

搭配动效强调剩余时间。

00:00:5432105432105432105432109876543210987654321098765432109876543210

示例代码

"use client";

const targetMs = Date.now() + 30 * 60 * 1000;
const countdown = useCountdown(targetMs);

<div className="flex items-center gap-2 text-3xl font-semibold tabular-nums leading-none">
  <span className="inline-flex min-w-[52px] justify-center rounded-xl border border-border bg-muted px-3 py-2">
    {String(countdown.hours).padStart(2, "0")}
  </span>
  <span className="text-muted-foreground">:</span>
  <span className="inline-flex min-w-[52px] justify-center rounded-xl border border-border bg-muted px-3 py-2">
    {String(countdown.minutes).padStart(2, "0")}
  </span>
  <span className="text-muted-foreground">:</span>
  <span className="inline-flex min-w-[52px] justify-center rounded-xl border border-border bg-muted px-3 py-2">
    <RollingSeconds value={countdown.seconds} />
  </span>
</div>

基础倒计时

展示数字分段、状态与强调色。

版本发布倒计时

准备好发布说明与公告。

加载中

今晚数据同步

同步期间暂停批量导入。

加载中

示例代码

"use client";

const targetMs = Date.now() + 2 * 60 * 60 * 1000;

<CountdownDigits targetMs={targetMs} highlight />

紧凑列表

用于列表或待办项的行内倒计时。

渠道广告下线

运营团队

加载中

数据模型同步

数据团队

加载中

客户回访任务

客户成功

加载中

示例代码

"use client";

const targetMs = Date.now() + 45 * 60 * 1000;

<CompactCountdown targetMs={targetMs} />

可重置倒计时

结合按钮控制节奏的倒计时示例。

客服响应 SLA

重置到 15 分钟倒计时。

加载中

示例代码

"use client";

const [targetMs, setTargetMs] = useState(Date.now() + 15 * 60 * 1000);

<CountdownDigits targetMs={targetMs} />
<Button variant="outline" onClick={() => setTargetMs(Date.now() + 15 * 60 * 1000)}>
  重置 15 分钟
</Button>
<Button onClick={() => setTargetMs(Date.now() + 60 * 60 * 1000)}>续时 1 小时</Button>

环形与进度条

通过环形与进度条强化节奏感。

加载中

活动剩余 30 分钟

批处理任务

当前批次剩余时间

剩余时间--:--:--

自动续期运行中

示例代码

"use client";

const totalMs = 30 * 60 * 1000;
const targetMs = Date.now() + totalMs;

<ProgressCountdown targetMs={targetMs} totalMs={totalMs} />