[{"data":1,"prerenderedAt":1409},["ShallowReactive",2],{"content-\u002Fen\u002Fcomponents\u002Fprogress-ring":3,"content-en-fallback-\u002Fen\u002Fcomponents\u002Fprogress-ring":767},{"id":4,"title":5,"body":6,"description":758,"extension":759,"meta":760,"nav":761,"navigation":762,"path":763,"seo":764,"stem":765,"__hash__":766},"content_en\u002Fen\u002Fcomponents\u002Fprogress-ring.md","Progress Ring",{"type":7,"value":8,"toc":750},"minimark",[9,13,17,38,86,91,102,158,162,180,241,245,268,355,359,374,410,414,423,484,488,692,746],[10,11,5],"h1",{"id":12},"progress-ring",[14,15,16],"p",{},"Progress Ring indicates an operation that is underway but cannot yet be quantified (the indeterminate \"spinner\" state), or displays progress that can already be quantified (the determinate arc length).",[14,18,19,20,24,25,28,29,33,34,37],{},"The styling aligns with the WinUI 3 \u002F Windows App SDK ProgressRing (",[21,22,23],"code",{},"microsoft-ui-xaml"," ",[21,26,27],{},"winui3\u002Frelease\u002F2.5.1",", verified byte-for-byte identical to the WindowsAppSDK 2.0.1 sources used by the latest WinUI3 Gallery release v2.9.3): ring geometry (r≈14 \u002F 32px control, stroke≈3, round line caps), brand foreground color, optional track color; the indeterminate state is a ",[30,31,32],"strong",{},"solid round-tipped arc"," cycling over 2s — the arc first grows from a dot (up to half the circumference), then the tail catches up to the head and the arc shrinks back into a dot, repeating endlessly; the component is a purely decorative indicator (",[21,35,36],{},"pointer-events: none",", out of the tab order, SVG hidden from screen readers).",[39,40,42,49],"demo-block",{"title":41},"Basic usage (indeterminate spinner)",[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=\"Loading\" \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","\"Loading\"",[60,84,85],{"class":66}," \u002F>\n",[87,88,90],"h2",{"id":89},"sizes","Sizes",[14,92,93,94,97,98,101],{},"Default 32×32 (aligned with the WinUI default size). Also provides ",[21,95,96],{},"small=16"," (aligned with WinUI MinWidth\u002FMinHeight) and ",[21,99,100],{},"large=48","; the ring scales vectorally via the viewBox, and the stroke scales proportionally with the size.",[39,103,105,110],{"title":104},"Three sizes",[43,106,107],{"v-slot:preview":45},[108,109],"progress-ring-size-demo",{},[43,111,112],{"v-slot:code":45},[52,113,115],{"className":54,"code":114,"language":56,"meta":45,"style":45},"\u003CFluereProgressRing size=\"small\" \u002F>\n\u003CFluereProgressRing \u002F>\n\u003CFluereProgressRing size=\"large\" \u002F>\n",[21,116,117,133,142],{"__ignoreMap":45},[60,118,119,121,123,126,128,131],{"class":62,"line":63},[60,120,67],{"class":66},[60,122,71],{"class":70},[60,124,125],{"class":74}," size",[60,127,78],{"class":66},[60,129,130],{"class":81},"\"small\"",[60,132,85],{"class":66},[60,134,136,138,140],{"class":62,"line":135},2,[60,137,67],{"class":66},[60,139,71],{"class":70},[60,141,85],{"class":66},[60,143,145,147,149,151,153,156],{"class":62,"line":144},3,[60,146,67],{"class":66},[60,148,71],{"class":70},[60,150,125],{"class":74},[60,152,78],{"class":66},[60,154,155],{"class":81},"\"large\"",[60,157,85],{"class":66},[87,159,161],{"id":160},"determinate-progress","Determinate progress",[14,163,164,167,168,171,172,175,176,179],{},[21,165,166],{},":indeterminate=\"false\""," enters the determinate state: the arc grows clockwise from the top (12 o'clock) to ",[21,169,170],{},"(value − min) \u002F (max − min)",", with the arc length transitioning smoothly as value changes. ",[21,173,174],{},"min"," defaults to 0, ",[21,177,178],{},"max"," defaults to 100.",[39,181,183,188],{"title":182},"Determinate (drag the slider to change progress)",[43,184,185],{"v-slot:preview":45},[186,187],"progress-ring-determinate-demo",{},[43,189,190],{"v-slot:code":45},[52,191,193],{"className":54,"code":192,"language":56,"meta":45,"style":45},"\u003CFluereProgressRing :model-value=\"40\" :indeterminate=\"false\" label=\"Download progress\" \u002F>\n",[21,194,195],{"__ignoreMap":45},[60,196,197,199,201,204,207,209,212,216,218,220,223,225,227,230,232,234,236,239],{"class":62,"line":63},[60,198,67],{"class":66},[60,200,71],{"class":70},[60,202,203],{"class":66}," :",[60,205,206],{"class":74},"model-value",[60,208,78],{"class":66},[60,210,211],{"class":81},"\"",[60,213,215],{"class":214},"sj4cs","40",[60,217,211],{"class":81},[60,219,203],{"class":66},[60,221,222],{"class":74},"indeterminate",[60,224,78],{"class":66},[60,226,211],{"class":81},[60,228,229],{"class":214},"false",[60,231,211],{"class":81},[60,233,75],{"class":74},[60,235,78],{"class":66},[60,237,238],{"class":81},"\"Download progress\"",[60,240,85],{"class":66},[87,242,244],{"id":243},"track-backgroundcolor","Track (BackgroundColor)",[14,246,247,248,251,252,255,256,259,260,263,264,267],{},"Passing any CSS color to ",[21,249,250],{},"background-color"," draws a track beneath the ring, aligned with WinUI ",[21,253,254],{},"ProgressRing.Background"," (the \"Background color\" option in WinUI3 Gallery, which in Lottie is the full circle that does ",[30,257,258],{},"not participate in the rotation","). ",[30,261,262],{},"When omitted, the track is not shown",", consistent with the WinUI default ",[21,265,266],{},"ControlFillColorTransparentBrush","; both forms (indeterminate \u002F determinate) are supported.",[39,269,271,276],{"title":270},"Indeterminate and determinate with a track (aligned with WinUI3 Gallery)",[43,272,273],{"v-slot:preview":45},[274,275],"progress-ring-background-demo",{},[43,277,278],{"v-slot:code":45},[52,279,281],{"className":54,"code":280,"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,282,283,299,306,323,338,349],{"__ignoreMap":45},[60,284,285,287,289,292,294,297],{"class":62,"line":63},[60,286,67],{"class":66},[60,288,71],{"class":70},[60,290,291],{"class":74}," background-color",[60,293,78],{"class":66},[60,295,296],{"class":81},"\"var(--colorNeutralStroke1)\"",[60,298,85],{"class":66},[60,300,301,303],{"class":62,"line":135},[60,302,67],{"class":66},[60,304,305],{"class":70},"FluereProgressRing\n",[60,307,308,311,313,315,317,320],{"class":62,"line":144},[60,309,310],{"class":66},"  :",[60,312,206],{"class":74},[60,314,78],{"class":66},[60,316,211],{"class":81},[60,318,319],{"class":214},"20",[60,321,322],{"class":81},"\"\n",[60,324,326,328,330,332,334,336],{"class":62,"line":325},4,[60,327,310],{"class":66},[60,329,222],{"class":74},[60,331,78],{"class":66},[60,333,211],{"class":81},[60,335,229],{"class":214},[60,337,322],{"class":81},[60,339,341,344,346],{"class":62,"line":340},5,[60,342,343],{"class":74},"  background-color",[60,345,78],{"class":66},[60,347,348],{"class":81},"\"var(--colorNeutralStroke1)\"\n",[60,350,352],{"class":62,"line":351},6,[60,353,354],{"class":66},"\u002F>\n",[87,356,358],{"id":357},"active-hidden","Active \u002F hidden",[14,360,361,362,365,366,369,370,373],{},"When ",[21,363,364],{},":active=\"false\"",", the whole component becomes transparent and the animation pauses (aligned with WinUI ",[21,367,368],{},"IsActive=false"," → ",[21,371,372],{},"Opacity=0","), commonly used for \"disappear once loading is done\" scenarios.",[39,375,377,382],{"title":376},"IsActive toggle",[43,378,379],{"v-slot:preview":45},[380,381],"progress-ring-active-demo",{},[43,383,384],{"v-slot:code":45},[52,385,387],{"className":54,"code":386,"language":56,"meta":45,"style":45},"\u003CFluereProgressRing :active=\"active\" \u002F>\n",[21,388,389],{"__ignoreMap":45},[60,390,391,393,395,397,400,402,404,406,408],{"class":62,"line":63},[60,392,67],{"class":66},[60,394,71],{"class":70},[60,396,203],{"class":66},[60,398,399],{"class":74},"active",[60,401,78],{"class":66},[60,403,211],{"class":81},[60,405,399],{"class":66},[60,407,211],{"class":81},[60,409,85],{"class":66},[87,411,413],{"id":412},"disabled","Disabled",[14,415,361,416,418,419,422],{},[21,417,412],{},", the foreground color downgrades to the ",[21,420,421],{},"…Disabled"," tier (effective in both indeterminate \u002F determinate forms).",[39,424,426,431],{"title":425},"Disabled state",[43,427,428],{"v-slot:preview":45},[429,430],"progress-ring-disabled-demo",{},[43,432,433],{"v-slot:code":45},[52,434,436],{"className":54,"code":435,"language":56,"meta":45,"style":45},"\u003CFluereProgressRing disabled \u002F>\n\u003CFluereProgressRing disabled :indeterminate=\"false\" :model-value=\"60\" \u002F>\n",[21,437,438,449],{"__ignoreMap":45},[60,439,440,442,444,447],{"class":62,"line":63},[60,441,67],{"class":66},[60,443,71],{"class":70},[60,445,446],{"class":74}," disabled",[60,448,85],{"class":66},[60,450,451,453,455,457,459,461,463,465,467,469,471,473,475,477,480,482],{"class":62,"line":135},[60,452,67],{"class":66},[60,454,71],{"class":70},[60,456,446],{"class":74},[60,458,203],{"class":66},[60,460,222],{"class":74},[60,462,78],{"class":66},[60,464,211],{"class":81},[60,466,229],{"class":214},[60,468,211],{"class":81},[60,470,203],{"class":66},[60,472,206],{"class":74},[60,474,78],{"class":66},[60,476,211],{"class":81},[60,478,479],{"class":214},"60",[60,481,211],{"class":81},[60,483,85],{"class":66},[87,485,487],{"id":486},"api","API",[489,490,491,510],"table",{},[492,493,494],"thead",{},[495,496,497,501,504,507],"tr",{},[498,499,500],"th",{},"Props",[498,502,503],{},"Type",[498,505,506],{},"Default",[498,508,509],{},"Description",[511,512,513,533,550,574,591,609,629,653,670],"tbody",{},[495,514,515,520,525,530],{},[516,517,518],"td",{},[21,519,222],{},[516,521,522],{},[21,523,524],{},"boolean",[516,526,527],{},[21,528,529],{},"true",[516,531,532],{},"Indeterminate (spinner) mode, aligned with WinUI IsIndeterminate",[495,534,535,539,543,547],{},[516,536,537],{},[21,538,399],{},[516,540,541],{},[21,542,524],{},[516,544,545],{},[21,546,529],{},[516,548,549],{},"Active; transparent and animation paused when false, aligned with WinUI IsActive",[495,551,552,557,562,567],{},[516,553,554],{},[21,555,556],{},"modelValue",[516,558,559],{},[21,560,561],{},"number",[516,563,564],{},[21,565,566],{},"0",[516,568,569,570,573],{},"Current progress value (effective in determinate state, ",[21,571,572],{},"v-model",")",[495,575,576,580,584,588],{},[516,577,578],{},[21,579,174],{},[516,581,582],{},[21,583,561],{},[516,585,586],{},[21,587,566],{},[516,589,590],{},"Minimum value",[495,592,593,597,601,606],{},[516,594,595],{},[21,596,178],{},[516,598,599],{},[21,600,561],{},[516,602,603],{},[21,604,605],{},"100",[516,607,608],{},"Maximum value",[495,610,611,616,621,626],{},[516,612,613],{},[21,614,615],{},"size",[516,617,618],{},[21,619,620],{},"'small' | 'medium' | 'large'",[516,622,623],{},[21,624,625],{},"'medium'",[516,627,628],{},"Size: 16 \u002F 32 (WinUI default) \u002F 48",[495,630,631,636,641,646],{},[516,632,633],{},[21,634,635],{},"backgroundColor",[516,637,638],{},[21,639,640],{},"string",[516,642,643],{},[21,644,645],{},"—",[516,647,648,649,652],{},"Track (background ring) color, any CSS color; aligned with WinUI ",[21,650,651],{},"Background",", transparent with no track by default",[495,654,655,659,663,667],{},[516,656,657],{},[21,658,412],{},[516,660,661],{},[21,662,524],{},[516,664,665],{},[21,666,229],{},[516,668,669],{},"Disabled (foreground downgraded to the …Disabled tier)",[495,671,672,677,681,685],{},[516,673,674],{},[21,675,676],{},"label",[516,678,679],{},[21,680,640],{},[516,682,683],{},[21,684,645],{},[516,686,687,688,691],{},"Accessible name (",[21,689,690],{},"aria-label","); whether to annotate is decided by the consumer for purely decorative scenarios",[693,694,695,714,728],"blockquote",{},[14,696,697,698,701,702,705,706,709,710,713],{},"Implementation notes: the indeterminate state is a solid round-tipped arc (",[21,699,700],{},"RoundLineCap",", no gradient), 2s per cycle: arc length 0 → half-circumference → 0, with the start and end points corresponding respectively to Lottie's ",[21,703,704],{},"TrimStart \u002F TrimEnd"," segmented linear keyframes and a visible rotation of 900°\u002Fcycle (Lottie ",[21,707,708],{},"RotationAngleInDegrees",", whose ",[21,711,712],{},"cubic-bezier(.167,.167,.833,.833)"," easing is identically linear); when the arc length is 0, the two round caps merge into a \"diameter = line width\" dot, and the cycle start and end coincide modulo 360°, looping seamlessly.",[14,715,716,717,24,720,723,724,727],{},"Rotation and arc length are driven by the ",[30,718,719],{},"same",[21,721,722],{},"@keyframes",", and each property is \"visually equivalent\" at the cycle boundary (rotation jumps 2 full turns, ",[21,725,726],{},"stroke-dashoffset"," jumps 1 full turn while the arc length is 0 at that moment). This is a deliberate design: Lottie's rotation jump (900° ≡ 180°) and the dash's half-turn jump must flip pages at the same time to cancel each other out — if split into two animations (\"parent rotates + child dash\"), a high load could page one animation but not the other, flipping the whole ring 180° in one frame (manifesting as \"a small dot flashing at the bottom when the arc is near the top\").",[14,729,730,731,733,734,737,738,741,742,745],{},"The determinate arc length transitions via ",[21,732,726],{},". Animation duration \u002F easing come from the Fluent ",[21,735,736],{},"duration*",", ",[21,739,740],{},"curve*"," tokens and honor ",[21,743,744],{},"prefers-reduced-motion"," (stopping the animation at the half-ring when reduced).",[747,748,749],"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":135,"depth":135,"links":751},[752,753,754,755,756,757],{"id":89,"depth":135,"text":90},{"id":160,"depth":135,"text":161},{"id":243,"depth":135,"text":244},{"id":357,"depth":135,"text":358},{"id":412,"depth":135,"text":413},{"id":486,"depth":135,"text":487},"Circular progress indicator with two forms — indeterminate (rotating) and determinate (arc length) — restyling WinUI 3 ProgressRing.","md",{},{"title":5},true,"\u002Fen\u002Fcomponents\u002Fprogress-ring",{"title":5,"description":758},"en\u002Fcomponents\u002Fprogress-ring","7yjaGvYBGy920aRAkgJKpRLL_ljvIlsa0UKFxDjH2HM",{"id":768,"title":769,"body":770,"description":1402,"extension":759,"meta":1403,"nav":1404,"navigation":762,"path":1405,"seo":1406,"stem":1407,"__hash__":1408},"content\u002Fcomponents\u002Fprogress-ring.md","Progress Ring 进度环",{"type":7,"value":771,"toc":1394},[772,775,778,793,822,825,834,883,886,900,953,957,976,1049,1053,1063,1096,1099,1107,1164,1166,1348,1392],[10,773,769],{"id":774},"progress-ring-进度环",[14,776,777],{},"Progress Ring 用来指示正在进行、但暂不可量化的操作（不确定态「转圈」），或展示已可量化的进度（确定态弧长）。",[14,779,780,781,24,783,785,786,789,790,792],{},"样式对齐 WinUI 3 \u002F Windows App SDK 的 ProgressRing（",[21,782,23],{},[21,784,27],{},"，已核对与最新 WinUI3 Gallery 发行版 v2.9.3 所用的 WindowsAppSDK 2.0.1 源码逐字节一致）：圆环几何（r≈14 \u002F 32px 控件、stroke≈3、两端圆线帽）、品牌前景色、可选轨道色；不确定态是",[30,787,788],{},"实色圆头弧段","的 2s 循环——弧先由圆点逐渐变长（上限半周长），随后尾端追上首端、弧又缩回圆点，如此往复；组件为纯装饰指示（",[21,791,36],{},"、不进 Tab 序、SVG 对屏幕阅读器隐藏）。",[39,794,796,800],{"title":795},"基础用法（不确定转圈）",[43,797,798],{"v-slot:preview":45},[47,799],{},[43,801,802],{"v-slot:code":45},[52,803,805],{"className":54,"code":804,"language":56,"meta":45,"style":45},"\u003CFluereProgressRing label=\"正在加载\" \u002F>\n",[21,806,807],{"__ignoreMap":45},[60,808,809,811,813,815,817,820],{"class":62,"line":63},[60,810,67],{"class":66},[60,812,71],{"class":70},[60,814,75],{"class":74},[60,816,78],{"class":66},[60,818,819],{"class":81},"\"正在加载\"",[60,821,85],{"class":66},[87,823,824],{"id":824},"尺寸",[14,826,827,828,830,831,833],{},"默认 32×32（对齐 WinUI 默认尺寸）。另提供 ",[21,829,96],{},"（对齐 WinUI MinWidth\u002FMinHeight）与 ",[21,832,100],{},"；圆环按 viewBox 矢量缩放，stroke 随尺寸等比变化。",[39,835,837,841],{"title":836},"三档尺寸",[43,838,839],{"v-slot:preview":45},[108,840],{},[43,842,843],{"v-slot:code":45},[52,844,845],{"className":54,"code":114,"language":56,"meta":45,"style":45},[21,846,847,861,869],{"__ignoreMap":45},[60,848,849,851,853,855,857,859],{"class":62,"line":63},[60,850,67],{"class":66},[60,852,71],{"class":70},[60,854,125],{"class":74},[60,856,78],{"class":66},[60,858,130],{"class":81},[60,860,85],{"class":66},[60,862,863,865,867],{"class":62,"line":135},[60,864,67],{"class":66},[60,866,71],{"class":70},[60,868,85],{"class":66},[60,870,871,873,875,877,879,881],{"class":62,"line":144},[60,872,67],{"class":66},[60,874,71],{"class":70},[60,876,125],{"class":74},[60,878,78],{"class":66},[60,880,155],{"class":81},[60,882,85],{"class":66},[87,884,885],{"id":885},"确定态进度",[14,887,888,890,891,893,894,896,897,899],{},[21,889,166],{}," 进入确定态：弧从正上方（12 点）顺时针增长到 ",[21,892,170],{},"，value 变化时弧长平滑过渡。",[21,895,174],{}," 默认 0、",[21,898,178],{}," 默认 100。",[39,901,903,907],{"title":902},"确定态（拖动滑块改变进度）",[43,904,905],{"v-slot:preview":45},[186,906],{},[43,908,909],{"v-slot:code":45},[52,910,912],{"className":54,"code":911,"language":56,"meta":45,"style":45},"\u003CFluereProgressRing :model-value=\"40\" :indeterminate=\"false\" label=\"下载进度\" \u002F>\n",[21,913,914],{"__ignoreMap":45},[60,915,916,918,920,922,924,926,928,930,932,934,936,938,940,942,944,946,948,951],{"class":62,"line":63},[60,917,67],{"class":66},[60,919,71],{"class":70},[60,921,203],{"class":66},[60,923,206],{"class":74},[60,925,78],{"class":66},[60,927,211],{"class":81},[60,929,215],{"class":214},[60,931,211],{"class":81},[60,933,203],{"class":66},[60,935,222],{"class":74},[60,937,78],{"class":66},[60,939,211],{"class":81},[60,941,229],{"class":214},[60,943,211],{"class":81},[60,945,75],{"class":74},[60,947,78],{"class":66},[60,949,950],{"class":81},"\"下载进度\"",[60,952,85],{"class":66},[87,954,956],{"id":955},"轨道backgroundcolor","轨道（BackgroundColor）",[14,958,959,961,962,964,965,968,969,972,973,975],{},[21,960,250],{}," 传入任意 CSS 颜色即在圆环下方绘制轨道，对齐 WinUI ",[21,963,254],{},"（WinUI3 Gallery 的「Background color」选项，落到 Lottie 里那条",[30,966,967],{},"不参与旋转","的整圆）。",[30,970,971],{},"缺省不传即不显示轨道","，与 WinUI 默认值 ",[21,974,266],{}," 一致；两种形态（不确定 \u002F 确定）都支持。",[39,977,979,983],{"title":978},"带轨道的不确定态与确定态（对齐 WinUI3 Gallery）",[43,980,981],{"v-slot:preview":45},[274,982],{},[43,984,985],{"v-slot:code":45},[52,986,987],{"className":54,"code":280,"language":56,"meta":45,"style":45},[21,988,989,1003,1009,1023,1037,1045],{"__ignoreMap":45},[60,990,991,993,995,997,999,1001],{"class":62,"line":63},[60,992,67],{"class":66},[60,994,71],{"class":70},[60,996,291],{"class":74},[60,998,78],{"class":66},[60,1000,296],{"class":81},[60,1002,85],{"class":66},[60,1004,1005,1007],{"class":62,"line":135},[60,1006,67],{"class":66},[60,1008,305],{"class":70},[60,1010,1011,1013,1015,1017,1019,1021],{"class":62,"line":144},[60,1012,310],{"class":66},[60,1014,206],{"class":74},[60,1016,78],{"class":66},[60,1018,211],{"class":81},[60,1020,319],{"class":214},[60,1022,322],{"class":81},[60,1024,1025,1027,1029,1031,1033,1035],{"class":62,"line":325},[60,1026,310],{"class":66},[60,1028,222],{"class":74},[60,1030,78],{"class":66},[60,1032,211],{"class":81},[60,1034,229],{"class":214},[60,1036,322],{"class":81},[60,1038,1039,1041,1043],{"class":62,"line":340},[60,1040,343],{"class":74},[60,1042,78],{"class":66},[60,1044,348],{"class":81},[60,1046,1047],{"class":62,"line":351},[60,1048,354],{"class":66},[87,1050,1052],{"id":1051},"激活-隐藏","激活 \u002F 隐藏",[14,1054,1055,1057,1058,369,1060,1062],{},[21,1056,364],{}," 时整体透明且动画暂停（对齐 WinUI ",[21,1059,368],{},[21,1061,372],{},"），常用于「加载完即消失」的场景。",[39,1064,1066,1070],{"title":1065},"IsActive 开关",[43,1067,1068],{"v-slot:preview":45},[380,1069],{},[43,1071,1072],{"v-slot:code":45},[52,1073,1074],{"className":54,"code":386,"language":56,"meta":45,"style":45},[21,1075,1076],{"__ignoreMap":45},[60,1077,1078,1080,1082,1084,1086,1088,1090,1092,1094],{"class":62,"line":63},[60,1079,67],{"class":66},[60,1081,71],{"class":70},[60,1083,203],{"class":66},[60,1085,399],{"class":74},[60,1087,78],{"class":66},[60,1089,211],{"class":81},[60,1091,399],{"class":66},[60,1093,211],{"class":81},[60,1095,85],{"class":66},[87,1097,1098],{"id":1098},"禁用",[14,1100,1101,1103,1104,1106],{},[21,1102,412],{}," 时前景色降级为 ",[21,1105,421],{}," 档（不确定 \u002F 确定两种形态均生效）。",[39,1108,1110,1114],{"title":1109},"禁用状态",[43,1111,1112],{"v-slot:preview":45},[429,1113],{},[43,1115,1116],{"v-slot:code":45},[52,1117,1118],{"className":54,"code":435,"language":56,"meta":45,"style":45},[21,1119,1120,1130],{"__ignoreMap":45},[60,1121,1122,1124,1126,1128],{"class":62,"line":63},[60,1123,67],{"class":66},[60,1125,71],{"class":70},[60,1127,446],{"class":74},[60,1129,85],{"class":66},[60,1131,1132,1134,1136,1138,1140,1142,1144,1146,1148,1150,1152,1154,1156,1158,1160,1162],{"class":62,"line":135},[60,1133,67],{"class":66},[60,1135,71],{"class":70},[60,1137,446],{"class":74},[60,1139,203],{"class":66},[60,1141,222],{"class":74},[60,1143,78],{"class":66},[60,1145,211],{"class":81},[60,1147,229],{"class":214},[60,1149,211],{"class":81},[60,1151,203],{"class":66},[60,1153,206],{"class":74},[60,1155,78],{"class":66},[60,1157,211],{"class":81},[60,1159,479],{"class":214},[60,1161,211],{"class":81},[60,1163,85],{"class":66},[87,1165,487],{"id":486},[489,1167,1168,1184],{},[492,1169,1170],{},[495,1171,1172,1175,1178,1181],{},[498,1173,1174],{},"属性（Props）",[498,1176,1177],{},"类型",[498,1179,1180],{},"默认",[498,1182,1183],{},"说明",[511,1185,1186,1203,1220,1240,1257,1274,1291,1311,1328],{},[495,1187,1188,1192,1196,1200],{},[516,1189,1190],{},[21,1191,222],{},[516,1193,1194],{},[21,1195,524],{},[516,1197,1198],{},[21,1199,529],{},[516,1201,1202],{},"不确定（转圈）模式，对齐 WinUI IsIndeterminate",[495,1204,1205,1209,1213,1217],{},[516,1206,1207],{},[21,1208,399],{},[516,1210,1211],{},[21,1212,524],{},[516,1214,1215],{},[21,1216,529],{},[516,1218,1219],{},"激活；false 时透明且动画暂停，对齐 WinUI IsActive",[495,1221,1222,1226,1230,1234],{},[516,1223,1224],{},[21,1225,556],{},[516,1227,1228],{},[21,1229,561],{},[516,1231,1232],{},[21,1233,566],{},[516,1235,1236,1237,1239],{},"当前进度值（确定态生效，",[21,1238,572],{},"）",[495,1241,1242,1246,1250,1254],{},[516,1243,1244],{},[21,1245,174],{},[516,1247,1248],{},[21,1249,561],{},[516,1251,1252],{},[21,1253,566],{},[516,1255,1256],{},"最小值",[495,1258,1259,1263,1267,1271],{},[516,1260,1261],{},[21,1262,178],{},[516,1264,1265],{},[21,1266,561],{},[516,1268,1269],{},[21,1270,605],{},[516,1272,1273],{},"最大值",[495,1275,1276,1280,1284,1288],{},[516,1277,1278],{},[21,1279,615],{},[516,1281,1282],{},[21,1283,620],{},[516,1285,1286],{},[21,1287,625],{},[516,1289,1290],{},"尺寸：16 \u002F 32（WinUI 默认）\u002F 48",[495,1292,1293,1297,1301,1305],{},[516,1294,1295],{},[21,1296,635],{},[516,1298,1299],{},[21,1300,640],{},[516,1302,1303],{},[21,1304,645],{},[516,1306,1307,1308,1310],{},"轨道（底环）颜色，任意 CSS 颜色；对齐 WinUI ",[21,1309,651],{},"，缺省透明无轨道",[495,1312,1313,1317,1321,1325],{},[516,1314,1315],{},[21,1316,412],{},[516,1318,1319],{},[21,1320,524],{},[516,1322,1323],{},[21,1324,229],{},[516,1326,1327],{},"禁用（前景降级 …Disabled 档）",[495,1329,1330,1334,1338,1342],{},[516,1331,1332],{},[21,1333,676],{},[516,1335,1336],{},[21,1337,640],{},[516,1339,1340],{},[21,1341,645],{},[516,1343,1344,1345,1347],{},"可访问名称（",[21,1346,690],{},"）；纯装饰场景由消费方决定标注与否",[693,1349,1350,1365,1377],{},[14,1351,1352,1353,1355,1356,1358,1359,1361,1362,1364],{},"实现要点：不确定态是实色圆头弧段（",[21,1354,700],{},"，无渐变），2s \u002F 一轮：弧长 0 → 半周长 → 0，起点与终点分别对应 Lottie 的 ",[21,1357,704],{}," 分段线性关键帧，可见旋转 900°\u002F轮（Lottie ",[21,1360,708],{},"，其 ",[21,1363,712],{}," 缓动恒等线性），弧长为 0 时两端圆头合成一个「直径 = 线宽」的圆点，周期首尾在模 360° 下重合、无缝循环。",[14,1366,1367,1368,24,1371,1373,1374,1376],{},"旋转与弧长由",[30,1369,1370],{},"同一条",[21,1372,722],{}," 驱动，且每项属性在周期边界处「视觉等价」（旋转跳 2 整圈、",[21,1375,726],{}," 跳 1 整圈而此刻弧长为 0）。这是刻意设计：Lottie 的旋转跳变（900° ≡ 180°）与 dash 半圈跳变必须同时翻页才互相抵消，若拆成「父元素旋转 + 子元素 dash」两条动画，负载高时会出现一条已翻页、另一条未翻页的帧，整环瞬间翻转 180°（表现为「弧接近顶部时底部闪一个小圆点」）。",[14,1378,1379,1380,1382,1383,1385,1386,1388,1389,1391],{},"确定态弧长走 ",[21,1381,726],{}," 过渡。动画时长 \u002F 缓动来自 Fluent ",[21,1384,736],{},"、",[21,1387,740],{}," 令牌，并遵循 ",[21,1390,744],{},"（减弱时停动画并停在半环）。",[747,1393,749],{},{"title":45,"searchDepth":135,"depth":135,"links":1395},[1396,1397,1398,1399,1400,1401],{"id":824,"depth":135,"text":824},{"id":885,"depth":135,"text":885},{"id":955,"depth":135,"text":956},{"id":1051,"depth":135,"text":1052},{"id":1098,"depth":135,"text":1098},{"id":486,"depth":135,"text":487},"环形进度指示：不确定（转圈）与确定（弧长）两种形态，样式还原 WinUI 3 ProgressRing。",{},{"title":769},"\u002Fcomponents\u002Fprogress-ring",{"title":769,"description":1402},"components\u002Fprogress-ring","voOif-PxZ9P-e23lT25y2Ndknwqpadr0B08Of0a6Hl0",1792150932411]