Preview Updated 2026-05-10

LiquidFill 液体填充

圆形/方形容器中的动态水位，多层叠加的正弦波动画，KPI 与进度场景的走心动效。

English translation pending This page hasn't been translated yet — falling back to Chinese. PRs welcome on GitHub.

基础用法

value 是 0..1 的填充比，自动按 Math.round(value * 100)% 显示中央文字（也可用 label 自定义）。speed=0 关闭动画；prefers-reduced-motion: reduce 自动停止波动以保持静态画面。

背景视口

src/App.vue

<script setup lang="ts">
import { ref } from 'vue';
import { CfLiquidFill } from '@chufix-design/vue';

const v1 = ref(0.32);
const v2 = ref(0.62);
const v3 = ref(0.88);
</script>
<template>
  <div style="display:flex;gap:24px;align-items:flex-end;justify-content:center;flex-wrap:wrap;">
    <CfLiquidFill :value="v1" :width="180" :height="180" />
    <CfLiquidFill :value="v2" :width="220" :height="220" :speed="0.6" />
    <CfLiquidFill :value="v3" :width="180" :height="180" :waves="3" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { CfLiquidFill } from '@chufix-design/vue';

const v1 = ref(0.32);
const v2 = ref(0.62);
const v3 = ref(0.88);
</script>
<template>
  <div style="display:flex;gap:24px;align-items:flex-end;justify-content:center;flex-wrap:wrap;">
    <CfLiquidFill :value="v1" :width="180" :height="180" />
    <CfLiquidFill :value="v2" :width="220" :height="220" :speed="0.6" />
    <CfLiquidFill :value="v3" :width="180" :height="180" :waves="3" />
  </div>
</template>

import { CfLiquidFill } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <CfLiquidFill value={0.62} width={220} height={220} speed={0.6} />
    </>
  );
}

import { CfLiquidFill } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <CfLiquidFill value={0.62} width={220} height={220} speed={0.6} />
    </>
  );
}

API

属性	类型	默认值	说明
`value`	`number`	`—`	0..1 的填充比
`width` / `height`	`number`	`240`	—
`amplitude`	`number`	`6`	波幅
`wavelength`	`number`	`0.6`	波长相对宽度
`speed`	`number`	`0.4`	周期/秒，0 关闭动画
`waves`	`number`	`2`	波层数 (1–3)
`shape`	`'circle' \| 'rect'`	`'circle'`	容器形状
`label`	`string`	自动百分比	中央文字

注意

LiquidFill 使用 requestAnimationFrame 持续重绘，必须 client:only="vue"（或 React 的 client:only="react"）。