[{"data":1,"prerenderedAt":764},["ShallowReactive",2],{"content-\u002Fcomponents\u002Fprogress-ring":3,"content-en-fallback-\u002Fcomponents\u002Fprogress-ring":763},{"id":4,"title":5,"body":6,"description":754,"extension":755,"meta":756,"nav":757,"navigation":758,"path":759,"seo":760,"stem":761,"__hash__":762},"content\u002Fcomponents\u002Fprogress-ring.md","Progress Ring 进度环",{"type":7,"value":8,"toc":746},"minimark",[9,13,17,38,86,90,101,157,160,178,239,243,265,352,356,370,406,409,419,480,484,688,742],[10,11,5],"h1",{"id":12},"progress-ring-进度环",[14,15,16],"p",{},"Progress Ring 用来指示正在进行、但暂不可量化的操作（不确定态「转圈」），或展示已可量化的进度（确定态弧长）。",[14,18,19,20,24,25,28,29,33,34,37],{},"样式对齐 WinUI 3 \u002F Windows App SDK 的 ProgressRing（",[21,22,23],"code",{},"microsoft-ui-xaml"," ",[21,26,27],{},"winui3\u002Frelease\u002F2.5.1","，已核对与最新 WinUI3 Gallery 发行版 v2.9.3 所用的 WindowsAppSDK 2.0.1 源码逐字节一致）：圆环几何（r≈14 \u002F 32px 控件、stroke≈3、两端圆线帽）、品牌前景色、可选轨道色；不确定态是",[30,31,32],"strong",{},"实色圆头弧段","的 2s 循环——弧先由圆点逐渐变长（上限半周长），随后尾端追上首端、弧又缩回圆点，如此往复；组件为纯装饰指示（",[21,35,36],{},"pointer-events: none","、不进 Tab 序、SVG 对屏幕阅读器隐藏）。",[39,40,42,49],"demo-block",{"title":41},"基础用法（不确定转圈）",[43,44,46],"template",{"v-slot:preview":45},"",[47,48],"progress-ring-basic-demo",{},[43,50,51],{"v-slot:code":45},[52,53,57],"pre",{"className":54,"code":55,"language":56,"meta":45,"style":45},"language-vue shiki shiki-themes github-light github-dark","\u003CFluereProgressRing label=\"正在加载\" \u002F>\n","vue",[21,58,59],{"__ignoreMap":45},[60,61,64,68,72,76,79,83],"span",{"class":62,"line":63},"line",1,[60,65,67],{"class":66},"sVt8B","\u003C",[60,69,71],{"class":70},"s9eBZ","FluereProgressRing",[60,73,75],{"class":74},"sScJk"," label",[60,77,78],{"class":66},"=",[60,80,82],{"class":81},"sZZnC","\"正在加载\"",[60,84,85],{"class":66}," \u002F>\n",[87,88,89],"h2",{"id":89},"尺寸",[14,91,92,93,96,97,100],{},"默认 32×32（对齐 WinUI 默认尺寸）。另提供 ",[21,94,95],{},"small=16","（对齐 WinUI MinWidth\u002FMinHeight）与 ",[21,98,99],{},"large=48","；圆环按 viewBox 矢量缩放，stroke 随尺寸等比变化。",[39,102,104,109],{"title":103},"三档尺寸",[43,105,106],{"v-slot:preview":45},[107,108],"progress-ring-size-demo",{},[43,110,111],{"v-slot:code":45},[52,112,114],{"className":54,"code":113,"language":56,"meta":45,"style":45},"\u003CFluereProgressRing size=\"small\" \u002F>\n\u003CFluereProgressRing \u002F>\n\u003CFluereProgressRing size=\"large\" \u002F>\n",[21,115,116,132,141],{"__ignoreMap":45},[60,117,118,120,122,125,127,130],{"class":62,"line":63},[60,119,67],{"class":66},[60,121,71],{"class":70},[60,123,124],{"class":74}," size",[60,126,78],{"class":66},[60,128,129],{"class":81},"\"small\"",[60,131,85],{"class":66},[60,133,135,137,139],{"class":62,"line":134},2,[60,136,67],{"class":66},[60,138,71],{"class":70},[60,140,85],{"class":66},[60,142,144,146,148,150,152,155],{"class":62,"line":143},3,[60,145,67],{"class":66},[60,147,71],{"class":70},[60,149,124],{"class":74},[60,151,78],{"class":66},[60,153,154],{"class":81},"\"large\"",[60,156,85],{"class":66},[87,158,159],{"id":159},"确定态进度",[14,161,162,165,166,169,170,173,174,177],{},[21,163,164],{},":indeterminate=\"false\""," 进入确定态：弧从正上方（12 点）顺时针增长到 ",[21,167,168],{},"(value − min) \u002F (max − min)","，value 变化时弧长平滑过渡。",[21,171,172],{},"min"," 默认 0、",[21,175,176],{},"max"," 默认 100。",[39,179,181,186],{"title":180},"确定态（拖动滑块改变进度）",[43,182,183],{"v-slot:preview":45},[184,185],"progress-ring-determinate-demo",{},[43,187,188],{"v-slot:code":45},[52,189,191],{"className":54,"code":190,"language":56,"meta":45,"style":45},"\u003CFluereProgressRing :model-value=\"40\" :indeterminate=\"false\" label=\"下载进度\" \u002F>\n",[21,192,193],{"__ignoreMap":45},[60,194,195,197,199,202,205,207,210,214,216,218,221,223,225,228,230,232,234,237],{"class":62,"line":63},[60,196,67],{"class":66},[60,198,71],{"class":70},[60,200,201],{"class":66}," :",[60,203,204],{"class":74},"model-value",[60,206,78],{"class":66},[60,208,209],{"class":81},"\"",[60,211,213],{"class":212},"sj4cs","40",[60,215,209],{"class":81},[60,217,201],{"class":66},[60,219,220],{"class":74},"indeterminate",[60,222,78],{"class":66},[60,224,209],{"class":81},[60,226,227],{"class":212},"false",[60,229,209],{"class":81},[60,231,75],{"class":74},[60,233,78],{"class":66},[60,235,236],{"class":81},"\"下载进度\"",[60,238,85],{"class":66},[87,240,242],{"id":241},"轨道backgroundcolor","轨道（BackgroundColor）",[14,244,245,248,249,252,253,256,257,260,261,264],{},[21,246,247],{},"background-color"," 传入任意 CSS 颜色即在圆环下方绘制轨道，对齐 WinUI ",[21,250,251],{},"ProgressRing.Background","（WinUI3 Gallery 的「Background color」选项，落到 Lottie 里那条",[30,254,255],{},"不参与旋转","的整圆）。",[30,258,259],{},"缺省不传即不显示轨道","，与 WinUI 默认值 ",[21,262,263],{},"ControlFillColorTransparentBrush"," 一致；两种形态（不确定 \u002F 确定）都支持。",[39,266,268,273],{"title":267},"带轨道的不确定态与确定态（对齐 WinUI3 Gallery）",[43,269,270],{"v-slot:preview":45},[271,272],"progress-ring-background-demo",{},[43,274,275],{"v-slot:code":45},[52,276,278],{"className":54,"code":277,"language":56,"meta":45,"style":45},"\u003CFluereProgressRing background-color=\"var(--colorNeutralStroke1)\" \u002F>\n\u003CFluereProgressRing\n  :model-value=\"20\"\n  :indeterminate=\"false\"\n  background-color=\"var(--colorNeutralStroke1)\"\n\u002F>\n",[21,279,280,296,303,320,335,346],{"__ignoreMap":45},[60,281,282,284,286,289,291,294],{"class":62,"line":63},[60,283,67],{"class":66},[60,285,71],{"class":70},[60,287,288],{"class":74}," background-color",[60,290,78],{"class":66},[60,292,293],{"class":81},"\"var(--colorNeutralStroke1)\"",[60,295,85],{"class":66},[60,297,298,300],{"class":62,"line":134},[60,299,67],{"class":66},[60,301,302],{"class":70},"FluereProgressRing\n",[60,304,305,308,310,312,314,317],{"class":62,"line":143},[60,306,307],{"class":66},"  :",[60,309,204],{"class":74},[60,311,78],{"class":66},[60,313,209],{"class":81},[60,315,316],{"class":212},"20",[60,318,319],{"class":81},"\"\n",[60,321,323,325,327,329,331,333],{"class":62,"line":322},4,[60,324,307],{"class":66},[60,326,220],{"class":74},[60,328,78],{"class":66},[60,330,209],{"class":81},[60,332,227],{"class":212},[60,334,319],{"class":81},[60,336,338,341,343],{"class":62,"line":337},5,[60,339,340],{"class":74},"  background-color",[60,342,78],{"class":66},[60,344,345],{"class":81},"\"var(--colorNeutralStroke1)\"\n",[60,347,349],{"class":62,"line":348},6,[60,350,351],{"class":66},"\u002F>\n",[87,353,355],{"id":354},"激活-隐藏","激活 \u002F 隐藏",[14,357,358,361,362,365,366,369],{},[21,359,360],{},":active=\"false\""," 时整体透明且动画暂停（对齐 WinUI ",[21,363,364],{},"IsActive=false"," → ",[21,367,368],{},"Opacity=0","），常用于「加载完即消失」的场景。",[39,371,373,378],{"title":372},"IsActive 开关",[43,374,375],{"v-slot:preview":45},[376,377],"progress-ring-active-demo",{},[43,379,380],{"v-slot:code":45},[52,381,383],{"className":54,"code":382,"language":56,"meta":45,"style":45},"\u003CFluereProgressRing :active=\"active\" \u002F>\n",[21,384,385],{"__ignoreMap":45},[60,386,387,389,391,393,396,398,400,402,404],{"class":62,"line":63},[60,388,67],{"class":66},[60,390,71],{"class":70},[60,392,201],{"class":66},[60,394,395],{"class":74},"active",[60,397,78],{"class":66},[60,399,209],{"class":81},[60,401,395],{"class":66},[60,403,209],{"class":81},[60,405,85],{"class":66},[87,407,408],{"id":408},"禁用",[14,410,411,414,415,418],{},[21,412,413],{},"disabled"," 时前景色降级为 ",[21,416,417],{},"…Disabled"," 档（不确定 \u002F 确定两种形态均生效）。",[39,420,422,427],{"title":421},"禁用状态",[43,423,424],{"v-slot:preview":45},[425,426],"progress-ring-disabled-demo",{},[43,428,429],{"v-slot:code":45},[52,430,432],{"className":54,"code":431,"language":56,"meta":45,"style":45},"\u003CFluereProgressRing disabled \u002F>\n\u003CFluereProgressRing disabled :indeterminate=\"false\" :model-value=\"60\" \u002F>\n",[21,433,434,445],{"__ignoreMap":45},[60,435,436,438,440,443],{"class":62,"line":63},[60,437,67],{"class":66},[60,439,71],{"class":70},[60,441,442],{"class":74}," disabled",[60,444,85],{"class":66},[60,446,447,449,451,453,455,457,459,461,463,465,467,469,471,473,476,478],{"class":62,"line":134},[60,448,67],{"class":66},[60,450,71],{"class":70},[60,452,442],{"class":74},[60,454,201],{"class":66},[60,456,220],{"class":74},[60,458,78],{"class":66},[60,460,209],{"class":81},[60,462,227],{"class":212},[60,464,209],{"class":81},[60,466,201],{"class":66},[60,468,204],{"class":74},[60,470,78],{"class":66},[60,472,209],{"class":81},[60,474,475],{"class":212},"60",[60,477,209],{"class":81},[60,479,85],{"class":66},[87,481,483],{"id":482},"api","API",[485,486,487,506],"table",{},[488,489,490],"thead",{},[491,492,493,497,500,503],"tr",{},[494,495,496],"th",{},"属性（Props）",[494,498,499],{},"类型",[494,501,502],{},"默认",[494,504,505],{},"说明",[507,508,509,529,546,570,587,605,625,649,666],"tbody",{},[491,510,511,516,521,526],{},[512,513,514],"td",{},[21,515,220],{},[512,517,518],{},[21,519,520],{},"boolean",[512,522,523],{},[21,524,525],{},"true",[512,527,528],{},"不确定（转圈）模式，对齐 WinUI IsIndeterminate",[491,530,531,535,539,543],{},[512,532,533],{},[21,534,395],{},[512,536,537],{},[21,538,520],{},[512,540,541],{},[21,542,525],{},[512,544,545],{},"激活；false 时透明且动画暂停，对齐 WinUI IsActive",[491,547,548,553,558,563],{},[512,549,550],{},[21,551,552],{},"modelValue",[512,554,555],{},[21,556,557],{},"number",[512,559,560],{},[21,561,562],{},"0",[512,564,565,566,569],{},"当前进度值（确定态生效，",[21,567,568],{},"v-model","）",[491,571,572,576,580,584],{},[512,573,574],{},[21,575,172],{},[512,577,578],{},[21,579,557],{},[512,581,582],{},[21,583,562],{},[512,585,586],{},"最小值",[491,588,589,593,597,602],{},[512,590,591],{},[21,592,176],{},[512,594,595],{},[21,596,557],{},[512,598,599],{},[21,600,601],{},"100",[512,603,604],{},"最大值",[491,606,607,612,617,622],{},[512,608,609],{},[21,610,611],{},"size",[512,613,614],{},[21,615,616],{},"'small' | 'medium' | 'large'",[512,618,619],{},[21,620,621],{},"'medium'",[512,623,624],{},"尺寸：16 \u002F 32（WinUI 默认）\u002F 48",[491,626,627,632,637,642],{},[512,628,629],{},[21,630,631],{},"backgroundColor",[512,633,634],{},[21,635,636],{},"string",[512,638,639],{},[21,640,641],{},"—",[512,643,644,645,648],{},"轨道（底环）颜色，任意 CSS 颜色；对齐 WinUI ",[21,646,647],{},"Background","，缺省透明无轨道",[491,650,651,655,659,663],{},[512,652,653],{},[21,654,413],{},[512,656,657],{},[21,658,520],{},[512,660,661],{},[21,662,227],{},[512,664,665],{},"禁用（前景降级 …Disabled 档）",[491,667,668,673,677,681],{},[512,669,670],{},[21,671,672],{},"label",[512,674,675],{},[21,676,636],{},[512,678,679],{},[21,680,641],{},[512,682,683,684,687],{},"可访问名称（",[21,685,686],{},"aria-label","）；纯装饰场景由消费方决定标注与否",[689,690,691,710,724],"blockquote",{},[14,692,693,694,697,698,701,702,705,706,709],{},"实现要点：不确定态是实色圆头弧段（",[21,695,696],{},"RoundLineCap","，无渐变），2s \u002F 一轮：弧长 0 → 半周长 → 0，起点与终点分别对应 Lottie 的 ",[21,699,700],{},"TrimStart \u002F TrimEnd"," 分段线性关键帧，可见旋转 900°\u002F轮（Lottie ",[21,703,704],{},"RotationAngleInDegrees","，其 ",[21,707,708],{},"cubic-bezier(.167,.167,.833,.833)"," 缓动恒等线性），弧长为 0 时两端圆头合成一个「直径 = 线宽」的圆点，周期首尾在模 360° 下重合、无缝循环。",[14,711,712,713,24,716,719,720,723],{},"旋转与弧长由",[30,714,715],{},"同一条",[21,717,718],{},"@keyframes"," 驱动，且每项属性在周期边界处「视觉等价」（旋转跳 2 整圈、",[21,721,722],{},"stroke-dashoffset"," 跳 1 整圈而此刻弧长为 0）。这是刻意设计：Lottie 的旋转跳变（900° ≡ 180°）与 dash 半圈跳变必须同时翻页才互相抵消，若拆成「父元素旋转 + 子元素 dash」两条动画，负载高时会出现一条已翻页、另一条未翻页的帧，整环瞬间翻转 180°（表现为「弧接近顶部时底部闪一个小圆点」）。",[14,725,726,727,729,730,733,734,737,738,741],{},"确定态弧长走 ",[21,728,722],{}," 过渡。动画时长 \u002F 缓动来自 Fluent ",[21,731,732],{},"duration*","、",[21,735,736],{},"curve*"," 令牌，并遵循 ",[21,739,740],{},"prefers-reduced-motion","（减弱时停动画并停在半环）。",[743,744,745],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}",{"title":45,"searchDepth":134,"depth":134,"links":747},[748,749,750,751,752,753],{"id":89,"depth":134,"text":89},{"id":159,"depth":134,"text":159},{"id":241,"depth":134,"text":242},{"id":354,"depth":134,"text":355},{"id":408,"depth":134,"text":408},{"id":482,"depth":134,"text":483},"环形进度指示：不确定（转圈）与确定（弧长）两种形态，样式还原 WinUI 3 ProgressRing。","md",{},{"title":5},true,"\u002Fcomponents\u002Fprogress-ring",{"title":5,"description":754},"components\u002Fprogress-ring","voOif-PxZ9P-e23lT25y2Ndknwqpadr0B08Of0a6Hl0",null,1791802963839]