[{"data":1,"prerenderedAt":1974},["ShallowReactive",2],{"content-\u002Fen\u002Fcomponents\u002Fprogress":3,"content-en-fallback-\u002Fen\u002Fcomponents\u002Fprogress":1072},{"id":4,"title":5,"body":6,"description":1060,"extension":1061,"meta":1062,"nav":1063,"navigation":1064,"path":1065,"seo":1066,"stem":1070,"__hash__":1071},"content_en\u002Fen\u002Fcomponents\u002Fprogress.md","Progress Bar",{"type":7,"value":8,"toc":1053},"minimark",[9,13,17,29,91,142,147,173,179,299,303,328,354,428,503,507,530,589,593,603,651,655,874,1049],[10,11,5],"h1",{"id":12},"progress-bar",[14,15,16],"p",{},"Progress Bar uses a 3px-high thin line to indicate an operation that \"is in progress but cannot be quantified\" (indeterminate state: two sliders loop), or to show the completion ratio of a \"known total\" (determinate state: fills proportionally from left to right).",[14,18,19,20,24,25,28],{},"The styling aligns with the ProgressBar of WinUI 3 \u002F Windows App SDK (",[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 source used by the latest WinUI3 Gallery release v2.9.3):",[30,31,32,60,82],"ul",{},[33,34,35,39,40,43,44,47,48,51,52,55,56,59],"li",{},[36,37,38],"strong",{},"Geometry",": control height 3 (",[21,41,42],{},"ProgressBarMinHeight","), corner radius 1.5 (",[21,45,46],{},"ProgressBarCornerRadius","); track height ",[36,49,50],{},"1"," (",[21,53,54],{},"ProgressBarTrackHeight","), corner radius 0.5 (",[21,57,58],{},"ProgressBarTrackCornerRadius",") and vertically centered — so the \"groove\" looks thinner than the indicator bar.",[33,61,62,65,66,69,70,73,74,77,78,81],{},[36,63,64],{},"Colors",": fill ",[21,67,68],{},"AccentFillColorDefaultBrush","; track ",[21,71,72],{},"ControlStrongStrokeColorDefault","; paused ",[21,75,76],{},"SystemFillColorCaution","; error ",[21,79,80],{},"SystemFillColorCritical",".",[33,83,84,87,88,81],{},[36,85,86],{},"Animation",": indeterminate state 2s \u002F cycle (slider 1: sweeps from left to right by 0→1.5s then rests; slider 2: starts after 0.75s and reaches the right end at 2s), ",[21,89,90],{},"RepeatBehavior=Forever",[92,93,95,102],"demo-block",{"title":94},"Indeterminate state (in progress, unquantifiable)",[96,97,99],"template",{"v-slot:preview":98},"",[100,101],"progress-indeterminate-demo",{},[96,103,104],{"v-slot:code":98},[105,106,110],"pre",{"className":107,"code":108,"language":109,"meta":98,"style":98},"language-vue shiki shiki-themes github-light github-dark","\u003CFluereProgressBar indeterminate label=\"In progress\" \u002F>\n","vue",[21,111,112],{"__ignoreMap":98},[113,114,117,121,125,129,132,135,139],"span",{"class":115,"line":116},"line",1,[113,118,120],{"class":119},"sVt8B","\u003C",[113,122,124],{"class":123},"s9eBZ","FluereProgressBar",[113,126,128],{"class":127},"sScJk"," indeterminate",[113,130,131],{"class":127}," label",[113,133,134],{"class":119},"=",[113,136,138],{"class":137},"sZZnC","\"In progress\"",[113,140,141],{"class":119}," \u002F>\n",[143,144,146],"h2",{"id":145},"determinate-progress","Determinate progress",[14,148,149,152,153,156,157,160,161,164,165,168,169,172],{},[21,150,151],{},":indeterminate=\"false\""," (default) is the determinate state: fill width = ",[21,154,155],{},"(value − min) \u002F (max − min)",", growing from left to right. ",[21,158,159],{},"min"," defaults to 0, ",[21,162,163],{},"max"," defaults to 100, and ",[21,166,167],{},"value"," is automatically clamped into that range; when ",[21,170,171],{},"max === min",", the fill width is set to 0 following WinUI's branch.",[14,174,175,176,81],{},"The example below matches WinUI3 Gallery's \"A determinate progress bar\": progress bar + percentage text + an inline ",[21,177,178],{},"NumberBox",[92,180,182,187],{"title":181},"Determinate (adjust progress with a NumberBox)",[96,183,184],{"v-slot:preview":98},[185,186],"progress-determinate-demo",{},[96,188,189],{"v-slot:code":98},[105,190,192],{"className":107,"code":191,"language":109,"meta":98,"style":98},"\u003CFluereProgressBar v-model=\"value\" label=\"Determinate progress bar example\" style=\"width: 130px\" \u002F>\n\u003CFluereNumberBox v-model=\"value\" :min=\"0\" :max=\"100\" spin-button-placement-mode=\"inline\" \u002F>\n",[21,193,194,244],{"__ignoreMap":98},[113,195,196,198,200,203,205,208,210,212,214,216,219,222,224,226,230,233,236,240,242],{"class":115,"line":116},[113,197,120],{"class":119},[113,199,124],{"class":123},[113,201,202],{"class":127}," v-model",[113,204,134],{"class":119},[113,206,207],{"class":137},"\"",[113,209,167],{"class":119},[113,211,207],{"class":137},[113,213,131],{"class":127},[113,215,134],{"class":119},[113,217,218],{"class":137},"\"Determinate progress bar example\"",[113,220,221],{"class":127}," style",[113,223,134],{"class":119},[113,225,207],{"class":137},[113,227,229],{"class":228},"sj4cs","width",[113,231,232],{"class":119},": ",[113,234,235],{"class":228},"130",[113,237,239],{"class":238},"szBVR","px",[113,241,207],{"class":137},[113,243,141],{"class":119},[113,245,247,249,252,254,256,258,260,262,265,267,269,271,274,276,278,280,282,284,287,289,292,294,297],{"class":115,"line":246},2,[113,248,120],{"class":119},[113,250,251],{"class":123},"FluereNumberBox",[113,253,202],{"class":127},[113,255,134],{"class":119},[113,257,207],{"class":137},[113,259,167],{"class":119},[113,261,207],{"class":137},[113,263,264],{"class":119}," :",[113,266,159],{"class":127},[113,268,134],{"class":119},[113,270,207],{"class":137},[113,272,273],{"class":228},"0",[113,275,207],{"class":137},[113,277,264],{"class":119},[113,279,163],{"class":127},[113,281,134],{"class":119},[113,283,207],{"class":137},[113,285,286],{"class":228},"100",[113,288,207],{"class":137},[113,290,291],{"class":127}," spin-button-placement-mode",[113,293,134],{"class":119},[113,295,296],{"class":137},"\"inline\"",[113,298,141],{"class":119},[143,300,302],{"id":301},"states-running-paused-error","States: Running \u002F Paused \u002F Error",[14,304,305,306,51,309,312,313,51,316,319,320,323,324,327],{},"WinUI expresses the exceptional states with two independent booleans: ",[21,307,308],{},"showPaused",[21,310,311],{},"ShowPaused",") and ",[21,314,315],{},"showError",[21,317,318],{},"ShowError","); when both are true ",[36,321,322],{},"error takes precedence"," (the evaluation order in ",[21,325,326],{},"ProgressBar.cpp#UpdateStates",").",[30,329,330,339],{},[33,331,332,333,335,336,338],{},"Determinate: only the fill color changes (paused → ",[21,334,76],{},", error → ",[21,337,80],{},"), transition 167ms.",[33,340,341,342,345,346,349,350,353],{},"Indeterminate: degrades into \"a ",[36,343,344],{},"100%-wide"," paused \u002F error indicator bar that slides in from the left and stops at full\" (in the ",[21,347,348],{},"IndeterminatePaused"," \u002F ",[21,351,352],{},"IndeterminateError"," states WinUI sets the second slider's width to full and its offset to 0), while the track is hidden.",[92,355,357,362],{"title":356},"The three indeterminate progress states (aligned with Gallery's Progress state option)",[96,358,359],{"v-slot:preview":98},[360,361],"progress-states-demo",{},[96,363,364],{"v-slot:code":98},[105,365,367],{"className":107,"code":366,"language":109,"meta":98,"style":98},"\u003CFluereProgressBar\n  indeterminate\n  :show-paused=\"state === 'paused'\"\n  :show-error=\"state === 'error'\"\n\u002F>\n",[21,368,369,376,381,403,422],{"__ignoreMap":98},[113,370,371,373],{"class":115,"line":116},[113,372,120],{"class":119},[113,374,375],{"class":123},"FluereProgressBar\n",[113,377,378],{"class":115,"line":246},[113,379,380],{"class":127},"  indeterminate\n",[113,382,384,387,390,392,394,397,400],{"class":115,"line":383},3,[113,385,386],{"class":119},"  :",[113,388,389],{"class":127},"show-paused",[113,391,134],{"class":119},[113,393,207],{"class":137},[113,395,396],{"class":119},"state ",[113,398,399],{"class":238},"===",[113,401,402],{"class":137}," 'paused'\"\n",[113,404,406,408,411,413,415,417,419],{"class":115,"line":405},4,[113,407,386],{"class":119},[113,409,410],{"class":127},"show-error",[113,412,134],{"class":119},[113,414,207],{"class":137},[113,416,396],{"class":119},[113,418,399],{"class":238},[113,420,421],{"class":137}," 'error'\"\n",[113,423,425],{"class":115,"line":424},5,[113,426,427],{"class":119},"\u002F>\n",[92,429,431,436],{"title":430},"Determinate paused \u002F error fill colors",[96,432,433],{"v-slot:preview":98},[434,435],"progress-status-color-demo",{},[96,437,438],{"v-slot:code":98},[105,439,441],{"className":107,"code":440,"language":109,"meta":98,"style":98},"\u003CFluereProgressBar v-model=\"value\" \u002F>\n\u003CFluereProgressBar v-model=\"value\" show-paused \u002F>\n\u003CFluereProgressBar v-model=\"value\" show-error \u002F>\n",[21,442,443,461,482],{"__ignoreMap":98},[113,444,445,447,449,451,453,455,457,459],{"class":115,"line":116},[113,446,120],{"class":119},[113,448,124],{"class":123},[113,450,202],{"class":127},[113,452,134],{"class":119},[113,454,207],{"class":137},[113,456,167],{"class":119},[113,458,207],{"class":137},[113,460,141],{"class":119},[113,462,463,465,467,469,471,473,475,477,480],{"class":115,"line":246},[113,464,120],{"class":119},[113,466,124],{"class":123},[113,468,202],{"class":127},[113,470,134],{"class":119},[113,472,207],{"class":137},[113,474,167],{"class":119},[113,476,207],{"class":137},[113,478,479],{"class":127}," show-paused",[113,481,141],{"class":119},[113,483,484,486,488,490,492,494,496,498,501],{"class":115,"line":383},[113,485,120],{"class":119},[113,487,124],{"class":123},[113,489,202],{"class":127},[113,491,134],{"class":119},[113,493,207],{"class":137},[113,495,167],{"class":119},[113,497,207],{"class":137},[113,499,500],{"class":127}," show-error",[113,502,141],{"class":119},[143,504,506],{"id":505},"track-color-background","Track color (Background)",[14,508,509,512,513,516,517,519,520,523,524,527,528,81],{},[21,510,511],{},"background-color"," maps to WinUI ",[21,514,515],{},"ProgressBar.Background"," (default ",[21,518,72],{},"). In WinUI this value is ",[36,521,522],{},"semi-transparent"," — 45% black (Light) \u002F 54.5% white (Dark) — and the Fluent 2 Web token table has no same-value entry, so this library defaults to the semantically nearest ",[21,525,526],{},"colorNeutralStrokeAccessible","; to strictly match the real-machine look, pass an equivalent semi-transparent color via ",[21,529,511],{},[92,531,533,538],{"title":532},"Default track color vs WinUI's original value (45% black)",[96,534,535],{"v-slot:preview":98},[536,537],"progress-background-demo",{},[96,539,540],{"v-slot:code":98},[105,541,543],{"className":107,"code":542,"language":109,"meta":98,"style":98},"\u003CFluereProgressBar v-model=\"value\" \u002F>\n\u003CFluereProgressBar v-model=\"value\" background-color=\"rgba(0, 0, 0, 0.45)\" \u002F>\n",[21,544,545,563],{"__ignoreMap":98},[113,546,547,549,551,553,555,557,559,561],{"class":115,"line":116},[113,548,120],{"class":119},[113,550,124],{"class":123},[113,552,202],{"class":127},[113,554,134],{"class":119},[113,556,207],{"class":137},[113,558,167],{"class":119},[113,560,207],{"class":137},[113,562,141],{"class":119},[113,564,565,567,569,571,573,575,577,579,582,584,587],{"class":115,"line":246},[113,566,120],{"class":119},[113,568,124],{"class":123},[113,570,202],{"class":127},[113,572,134],{"class":119},[113,574,207],{"class":137},[113,576,167],{"class":119},[113,578,207],{"class":137},[113,580,581],{"class":127}," background-color",[113,583,134],{"class":119},[113,585,586],{"class":137},"\"rgba(0, 0, 0, 0.45)\"",[113,588,141],{"class":119},[143,590,592],{"id":591},"disabled","Disabled",[14,594,595,596,598,599,602],{},"When ",[21,597,591],{},", the foreground degrades to the ",[21,600,601],{},"…Disabled"," slot (a library convention: the WinUI ProgressBar template has no Disabled visual state, because the control does not accept interaction to begin with).",[92,604,606,611],{"title":605},"Disabled state",[96,607,608],{"v-slot:preview":98},[609,610],"progress-disabled-demo",{},[96,612,613],{"v-slot:code":98},[105,614,616],{"className":107,"code":615,"language":109,"meta":98,"style":98},"\u003CFluereProgressBar v-model=\"value\" disabled \u002F>\n\u003CFluereProgressBar indeterminate disabled \u002F>\n",[21,617,618,639],{"__ignoreMap":98},[113,619,620,622,624,626,628,630,632,634,637],{"class":115,"line":116},[113,621,120],{"class":119},[113,623,124],{"class":123},[113,625,202],{"class":127},[113,627,134],{"class":119},[113,629,207],{"class":137},[113,631,167],{"class":119},[113,633,207],{"class":137},[113,635,636],{"class":127}," disabled",[113,638,141],{"class":119},[113,640,641,643,645,647,649],{"class":115,"line":246},[113,642,120],{"class":119},[113,644,124],{"class":123},[113,646,128],{"class":127},[113,648,636],{"class":127},[113,650,141],{"class":119},[143,652,654],{"id":653},"api","API",[656,657,658,677],"table",{},[659,660,661],"thead",{},[662,663,664,668,671,674],"tr",{},[665,666,667],"th",{},"Prop (Props)",[665,669,670],{},"Type",[665,672,673],{},"Default",[665,675,676],{},"Description",[678,679,680,707,727,747,770,792,813,835,852],"tbody",{},[662,681,682,688,693,697],{},[683,684,685],"td",{},[21,686,687],{},"modelValue",[683,689,690],{},[21,691,692],{},"number",[683,694,695],{},[21,696,273],{},[683,698,699,700,703,704],{},"Current progress value (effective in determinate state, ",[21,701,702],{},"v-model","); aligned with WinUI ",[21,705,706],{},"RangeBase.Value",[662,708,709,713,717,721],{},[683,710,711],{},[21,712,159],{},[683,714,715],{},[21,716,692],{},[683,718,719],{},[21,720,273],{},[683,722,723,724],{},"Minimum value; aligned with WinUI ",[21,725,726],{},"RangeBase.Minimum",[662,728,729,733,737,741],{},[683,730,731],{},[21,732,163],{},[683,734,735],{},[21,736,692],{},[683,738,739],{},[21,740,286],{},[683,742,743,744],{},"Maximum value; aligned with WinUI ",[21,745,746],{},"RangeBase.Maximum",[662,748,749,754,759,764],{},[683,750,751],{},[21,752,753],{},"indeterminate",[683,755,756],{},[21,757,758],{},"boolean",[683,760,761],{},[21,762,763],{},"false",[683,765,766,767],{},"Indeterminate state; aligned with WinUI ",[21,768,769],{},"IsIndeterminate",[662,771,772,776,780,784],{},[683,773,774],{},[21,775,315],{},[683,777,778],{},[21,779,758],{},[683,781,782],{},[21,783,763],{},[683,785,786,787,703,789,791],{},"Error state (fill ",[21,788,80],{},[21,790,318],{},", takes precedence over paused",[662,793,794,798,802,806],{},[683,795,796],{},[21,797,308],{},[683,799,800],{},[21,801,758],{},[683,803,804],{},[21,805,763],{},[683,807,808,809,703,811],{},"Paused state (fill ",[21,810,76],{},[21,812,311],{},[662,814,815,820,825,830],{},[683,816,817],{},[21,818,819],{},"backgroundColor",[683,821,822],{},[21,823,824],{},"string",[683,826,827],{},[21,828,829],{},"—",[683,831,832,833],{},"Track color (any CSS color); aligned with WinUI ",[21,834,515],{},[662,836,837,841,845,849],{},[683,838,839],{},[21,840,591],{},[683,842,843],{},[21,844,758],{},[683,846,847],{},[21,848,763],{},[683,850,851],{},"Disabled (foreground degrades to the …Disabled slot, library convention)",[662,853,854,859,863,867],{},[683,855,856],{},[21,857,858],{},"label",[683,860,861],{},[21,862,824],{},[683,864,865],{},[21,866,829],{},[683,868,869,870,873],{},"Accessible name (",[21,871,872],{},"aria-label",")",[875,876,877,917,922],"blockquote",{},[14,878,879,882,883,886,887,890,891,894,895,898,899,902,903,906,907,909,910,913,914,916],{},[36,880,881],{},"Accessibility",": the determinate state renders ",[21,884,885],{},"role=\"progressbar\""," + ",[21,888,889],{},"aria-valuemin\u002Fvaluemax\u002Faria-valuenow"," + a percentage ",[21,892,893],{},"aria-valuetext","; the indeterminate state ",[36,896,897],{},"does not expose RangeValue semantics"," (aligned with ",[21,900,901],{},"ProgressBarAutomationPeer.GetPatternCore"," returning ",[21,904,905],{},"nullptr"," when ",[21,908,769],{},"). WinUI prepends a localized status prefix to the accessible name in Error \u002F Paused \u002F Indeterminate (",[21,911,912],{},"SR_ProgressBarErrorStatus"," etc.); this library currently has no built-in copy channel in the component (i18n belongs to 0.3.0 goal 1.4), so reflect it in ",[21,915,858],{}," yourself when needed.",[14,918,919],{},[36,920,921],{},"Implementation notes",[30,923,924,952,1001,1031,1042],{},[33,925,926,927,51,930,349,933,936,937,940,941,943,944,947,948,951],{},"The semantic foundation reuses reka-ui's ",[21,928,929],{},"ProgressRoot",[21,931,932],{},"role",[21,934,935],{},"data-state","), but its value domain is fixed to ",[21,938,939],{},"0..max"," and it does not allow a negative ",[21,942,159],{},", so a ",[36,945,946],{},"normalized"," domain is passed to it, and ",[21,949,950],{},"aria-valuemin\u002Fmax\u002Fnow"," are explicitly overridden by the component according to WinUI's original domain.",[33,953,954,955,958,959,962,963,966,967,970,971,974,975,978,979,51,982,985,986,989,990,51,993,996,997,1000],{},"The displacements of the two indeterminate sliders all come from ",[21,956,957],{},"ProgressBarTemplateSettings",": with ",[21,960,961],{},"W"," as the control width, ",[21,964,965],{},"w₁ = 0.4W",", ",[21,968,969],{},"w₂ = 0.6W","; slider 1 moves ",[21,972,973],{},"−w₁ → 3w₁"," (i.e. ",[21,976,977],{},"−100% → 300%"," of its own width, finishing in 1.5s and held until 2s); slider 2 moves ",[21,980,981],{},"−1.5w₂ → 1.66w₂",[21,983,984],{},"−150% → 166%",", starting at 0.75s, arriving at 2s). The XAML keyframe easing is ",[21,987,988],{},"KeySpline=\"0.4,0,0.6,1\""," (standard ease-in-out); the Fluent token table has no same-value entry, so the semantically nearest ",[21,991,992],{},"--curveEasyEase",[21,994,995],{},"0.33,0,0.67,1",") is used: a 7-point frozen-frame sample measured a max deviation of ",[36,998,999],{},"5.64px \u002F 246.5px travel ≈ 2.3%",", affecting only the tween curve — the start and end positions match WinUI exactly.",[33,1002,1003,1004,1007,1008,1011,1012,24,1015,1018,1019,1021,1022,1024,1025,886,1028,327],{},"The determinate fill is a ",[36,1005,1006],{},"pixel width"," (WinUI sets ",[21,1009,1010],{},"Width"," directly); this library expresses it equivalently as a percentage; the tween on value changes goes through the ",[21,1013,1014],{},"Updating → Determinate",[21,1016,1017],{},"RepositionThemeAnimation"," in WinUI (no explicit Duration, and the default duration is not inside the ",[21,1020,23],{}," snapshot, so no A-grade evidence is available); this library expresses the same intent with a ",[21,1023,229],{}," transition (",[21,1026,1027],{},"durationNormal",[21,1029,1030],{},"curveEasyEase",[33,1032,1033,1034,1037,1038,1041],{},"The paused \u002F error color change is an explicit ",[21,1035,1036],{},"ColorAnimation Duration=\"0:0:0.167\""," in the XAML; this library uses ",[21,1039,1040],{},"--durationFast"," following the repo's uniform approximation of 167ms.",[33,1043,1044,1045,1048],{},"The animation honors ",[21,1046,1047],{},"prefers-reduced-motion",": when disabled, the indeterminate state leaves \"a 40%-wide static indicator bar resting at the left end\", and paused \u002F error rest at the full final state; a blank bar never appears.",[1050,1051,1052],"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}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}",{"title":98,"searchDepth":246,"depth":246,"links":1054},[1055,1056,1057,1058,1059],{"id":145,"depth":246,"text":146},{"id":301,"depth":246,"text":302},{"id":505,"depth":246,"text":506},{"id":591,"depth":246,"text":592},{"id":653,"depth":246,"text":654},"[object Object]","md",{},null,true,"\u002Fen\u002Fcomponents\u002Fprogress",{"title":5,"description":1067},{"Linear progress indicator":1068,"nav":1069},"indeterminate (slider loop) and determinate (proportional fill) forms, styling reproduced from the WinUI 3 ProgressBar.",{"title":5},"en\u002Fcomponents\u002Fprogress","-SwcILA2bIBWZK1YWfptqpwT0REihXRxxZTps_QQjrk",{"id":1073,"title":1074,"body":1075,"description":1967,"extension":1061,"meta":1968,"nav":1969,"navigation":1064,"path":1970,"seo":1971,"stem":1972,"__hash__":1973},"content\u002Fcomponents\u002Fprogress.md","Progress Bar 进度条",{"type":7,"value":1076,"toc":1960},[1077,1080,1083,1091,1140,1171,1174,1194,1199,1302,1306,1325,1348,1407,1478,1482,1503,1558,1561,1569,1614,1616,1814,1958],[10,1078,1074],{"id":1079},"progress-bar-进度条",[14,1081,1082],{},"Progress Bar 用一条 3px 高的细线指示「正在进行、但不可量化」的操作（不确定态：两条滑块循环滑动），或展示「已知总量」的完成比例（确定态：自左向右按比例填充）。",[14,1084,1085,1086,24,1088,1090],{},"样式对齐 WinUI 3 \u002F Windows App SDK 的 ProgressBar（",[21,1087,23],{},[21,1089,27],{},"，已核对与最新 WinUI3 Gallery 发行版 v2.9.3 所用的 WindowsAppSDK 2.0.1 源码逐字节一致）：",[30,1092,1093,1114,1132],{},[33,1094,1095,1098,1099,1101,1102,1104,1105,1107,1108,1110,1111,1113],{},[36,1096,1097],{},"几何","：控件高 3（",[21,1100,42],{},"）、圆角 1.5（",[21,1103,46],{},"）；轨道高 ",[36,1106,50],{},"（",[21,1109,54],{},"）、圆角 0.5（",[21,1112,58],{},"）并垂直居中——所以「凹槽」看起来比指示条细。",[33,1115,1116,1119,1120,1122,1123,1125,1126,1128,1129,1131],{},[36,1117,1118],{},"配色","：填充 ",[21,1121,68],{},"；轨道 ",[21,1124,72],{},"；暂停 ",[21,1127,76],{},"；出错 ",[21,1130,80],{},"。",[33,1133,1134,1137,1138,1131],{},[36,1135,1136],{},"动效","：不确定态 2s \u002F 轮（滑块 1：0→1.5s 从左扫到右后停留；滑块 2：0.75s 后起步，2s 时到右端），",[21,1139,90],{},[92,1141,1143,1147],{"title":1142},"不确定态（正在进行，无法量化）",[96,1144,1145],{"v-slot:preview":98},[100,1146],{},[96,1148,1149],{"v-slot:code":98},[105,1150,1152],{"className":107,"code":1151,"language":109,"meta":98,"style":98},"\u003CFluereProgressBar indeterminate label=\"正在进行\" \u002F>\n",[21,1153,1154],{"__ignoreMap":98},[113,1155,1156,1158,1160,1162,1164,1166,1169],{"class":115,"line":116},[113,1157,120],{"class":119},[113,1159,124],{"class":123},[113,1161,128],{"class":127},[113,1163,131],{"class":127},[113,1165,134],{"class":119},[113,1167,1168],{"class":137},"\"正在进行\"",[113,1170,141],{"class":119},[143,1172,1173],{"id":1173},"确定态进度",[14,1175,1176,1178,1179,1181,1182,1184,1185,1187,1188,1190,1191,1193],{},[21,1177,151],{},"（默认）即确定态：填充宽 = ",[21,1180,155],{},"，自左向右增长。",[21,1183,159],{}," 默认 0、",[21,1186,163],{}," 默认 100，",[21,1189,167],{}," 自动钳位到该区间；",[21,1192,171],{}," 时按 WinUI 的分支把填充宽置 0。",[14,1195,1196,1197,1131],{},"下面这个示例与 WinUI3 Gallery 的「A determinate progress bar」一致：进度条 + 百分比文本 + 内联 ",[21,1198,178],{},[92,1200,1202,1206],{"title":1201},"确定态（用 NumberBox 调整进度）",[96,1203,1204],{"v-slot:preview":98},[185,1205],{},[96,1207,1208],{"v-slot:code":98},[105,1209,1211],{"className":107,"code":1210,"language":109,"meta":98,"style":98},"\u003CFluereProgressBar v-model=\"value\" label=\"确定态进度条示例\" style=\"width: 130px\" \u002F>\n\u003CFluereNumberBox v-model=\"value\" :min=\"0\" :max=\"100\" spin-button-placement-mode=\"inline\" \u002F>\n",[21,1212,1213,1254],{"__ignoreMap":98},[113,1214,1215,1217,1219,1221,1223,1225,1227,1229,1231,1233,1236,1238,1240,1242,1244,1246,1248,1250,1252],{"class":115,"line":116},[113,1216,120],{"class":119},[113,1218,124],{"class":123},[113,1220,202],{"class":127},[113,1222,134],{"class":119},[113,1224,207],{"class":137},[113,1226,167],{"class":119},[113,1228,207],{"class":137},[113,1230,131],{"class":127},[113,1232,134],{"class":119},[113,1234,1235],{"class":137},"\"确定态进度条示例\"",[113,1237,221],{"class":127},[113,1239,134],{"class":119},[113,1241,207],{"class":137},[113,1243,229],{"class":228},[113,1245,232],{"class":119},[113,1247,235],{"class":228},[113,1249,239],{"class":238},[113,1251,207],{"class":137},[113,1253,141],{"class":119},[113,1255,1256,1258,1260,1262,1264,1266,1268,1270,1272,1274,1276,1278,1280,1282,1284,1286,1288,1290,1292,1294,1296,1298,1300],{"class":115,"line":246},[113,1257,120],{"class":119},[113,1259,251],{"class":123},[113,1261,202],{"class":127},[113,1263,134],{"class":119},[113,1265,207],{"class":137},[113,1267,167],{"class":119},[113,1269,207],{"class":137},[113,1271,264],{"class":119},[113,1273,159],{"class":127},[113,1275,134],{"class":119},[113,1277,207],{"class":137},[113,1279,273],{"class":228},[113,1281,207],{"class":137},[113,1283,264],{"class":119},[113,1285,163],{"class":127},[113,1287,134],{"class":119},[113,1289,207],{"class":137},[113,1291,286],{"class":228},[113,1293,207],{"class":137},[113,1295,291],{"class":127},[113,1297,134],{"class":119},[113,1299,296],{"class":137},[113,1301,141],{"class":119},[143,1303,1305],{"id":1304},"状态running-paused-error","状态：Running \u002F Paused \u002F Error",[14,1307,1308,1309,1107,1311,1313,1314,1107,1316,1318,1319,1107,1322,1324],{},"WinUI 用两个独立布尔表达异常态：",[21,1310,308],{},[21,1312,311],{},"）与 ",[21,1315,315],{},[21,1317,318],{},"），两者同为真时 ",[36,1320,1321],{},"error 优先",[21,1323,326],{}," 的判断顺序）。",[30,1326,1327,1336],{},[33,1328,1329,1330,1332,1333,1335],{},"确定态：只改填充色（暂停 → ",[21,1331,76],{},"，出错 → ",[21,1334,80],{},"），过渡时长 167ms。",[33,1337,1338,1339,1342,1343,349,1345,1347],{},"不确定态：退化为「一条 ",[36,1340,1341],{},"100% 宽","的 paused \u002F error 色指示条从左滑入并停在满格」（WinUI 在 ",[21,1344,348],{},[21,1346,352],{}," 状态里把第二条滑块宽度设为满宽、位移收到 0），轨道同时隐藏。",[92,1349,1351,1355],{"title":1350},"不确定态的三种进度状态（对齐 Gallery 的 Progress state 选项）",[96,1352,1353],{"v-slot:preview":98},[360,1354],{},[96,1356,1357],{"v-slot:code":98},[105,1358,1359],{"className":107,"code":366,"language":109,"meta":98,"style":98},[21,1360,1361,1367,1371,1387,1403],{"__ignoreMap":98},[113,1362,1363,1365],{"class":115,"line":116},[113,1364,120],{"class":119},[113,1366,375],{"class":123},[113,1368,1369],{"class":115,"line":246},[113,1370,380],{"class":127},[113,1372,1373,1375,1377,1379,1381,1383,1385],{"class":115,"line":383},[113,1374,386],{"class":119},[113,1376,389],{"class":127},[113,1378,134],{"class":119},[113,1380,207],{"class":137},[113,1382,396],{"class":119},[113,1384,399],{"class":238},[113,1386,402],{"class":137},[113,1388,1389,1391,1393,1395,1397,1399,1401],{"class":115,"line":405},[113,1390,386],{"class":119},[113,1392,410],{"class":127},[113,1394,134],{"class":119},[113,1396,207],{"class":137},[113,1398,396],{"class":119},[113,1400,399],{"class":238},[113,1402,421],{"class":137},[113,1404,1405],{"class":115,"line":424},[113,1406,427],{"class":119},[92,1408,1410,1414],{"title":1409},"确定态的 paused \u002F error 填充色",[96,1411,1412],{"v-slot:preview":98},[434,1413],{},[96,1415,1416],{"v-slot:code":98},[105,1417,1418],{"className":107,"code":440,"language":109,"meta":98,"style":98},[21,1419,1420,1438,1458],{"__ignoreMap":98},[113,1421,1422,1424,1426,1428,1430,1432,1434,1436],{"class":115,"line":116},[113,1423,120],{"class":119},[113,1425,124],{"class":123},[113,1427,202],{"class":127},[113,1429,134],{"class":119},[113,1431,207],{"class":137},[113,1433,167],{"class":119},[113,1435,207],{"class":137},[113,1437,141],{"class":119},[113,1439,1440,1442,1444,1446,1448,1450,1452,1454,1456],{"class":115,"line":246},[113,1441,120],{"class":119},[113,1443,124],{"class":123},[113,1445,202],{"class":127},[113,1447,134],{"class":119},[113,1449,207],{"class":137},[113,1451,167],{"class":119},[113,1453,207],{"class":137},[113,1455,479],{"class":127},[113,1457,141],{"class":119},[113,1459,1460,1462,1464,1466,1468,1470,1472,1474,1476],{"class":115,"line":383},[113,1461,120],{"class":119},[113,1463,124],{"class":123},[113,1465,202],{"class":127},[113,1467,134],{"class":119},[113,1469,207],{"class":137},[113,1471,167],{"class":119},[113,1473,207],{"class":137},[113,1475,500],{"class":127},[113,1477,141],{"class":119},[143,1479,1481],{"id":1480},"轨道色background","轨道色（Background）",[14,1483,1484,1486,1487,1489,1490,1492,1493,1496,1497,1499,1500,1502],{},[21,1485,511],{}," 对应 WinUI ",[21,1488,515],{},"（默认 ",[21,1491,72],{},"）。WinUI 该值是",[36,1494,1495],{},"半透明","的 45% 黑（Light）\u002F 54.5% 白（Dark），Fluent 2 Web 的 token 表里没有同值项，因此本库默认取语义位最近的 ",[21,1498,526],{},"；若要严格对齐实机观感，可用 ",[21,1501,511],{}," 传入等价半透明色。",[92,1504,1506,1510],{"title":1505},"默认轨道色 vs WinUI 原值（45% 黑）",[96,1507,1508],{"v-slot:preview":98},[536,1509],{},[96,1511,1512],{"v-slot:code":98},[105,1513,1514],{"className":107,"code":542,"language":109,"meta":98,"style":98},[21,1515,1516,1534],{"__ignoreMap":98},[113,1517,1518,1520,1522,1524,1526,1528,1530,1532],{"class":115,"line":116},[113,1519,120],{"class":119},[113,1521,124],{"class":123},[113,1523,202],{"class":127},[113,1525,134],{"class":119},[113,1527,207],{"class":137},[113,1529,167],{"class":119},[113,1531,207],{"class":137},[113,1533,141],{"class":119},[113,1535,1536,1538,1540,1542,1544,1546,1548,1550,1552,1554,1556],{"class":115,"line":246},[113,1537,120],{"class":119},[113,1539,124],{"class":123},[113,1541,202],{"class":127},[113,1543,134],{"class":119},[113,1545,207],{"class":137},[113,1547,167],{"class":119},[113,1549,207],{"class":137},[113,1551,581],{"class":127},[113,1553,134],{"class":119},[113,1555,586],{"class":137},[113,1557,141],{"class":119},[143,1559,1560],{"id":1560},"禁用",[14,1562,1563,1565,1566,1568],{},[21,1564,591],{}," 时前景降级为 ",[21,1567,601],{}," 档（本库约定：WinUI 的 ProgressBar 模板里没有 Disabled 视觉态，因为该控件本就不接受交互）。",[92,1570,1572,1576],{"title":1571},"禁用状态",[96,1573,1574],{"v-slot:preview":98},[609,1575],{},[96,1577,1578],{"v-slot:code":98},[105,1579,1580],{"className":107,"code":615,"language":109,"meta":98,"style":98},[21,1581,1582,1602],{"__ignoreMap":98},[113,1583,1584,1586,1588,1590,1592,1594,1596,1598,1600],{"class":115,"line":116},[113,1585,120],{"class":119},[113,1587,124],{"class":123},[113,1589,202],{"class":127},[113,1591,134],{"class":119},[113,1593,207],{"class":137},[113,1595,167],{"class":119},[113,1597,207],{"class":137},[113,1599,636],{"class":127},[113,1601,141],{"class":119},[113,1603,1604,1606,1608,1610,1612],{"class":115,"line":246},[113,1605,120],{"class":119},[113,1607,124],{"class":123},[113,1609,128],{"class":127},[113,1611,636],{"class":127},[113,1613,141],{"class":119},[143,1615,654],{"id":653},[656,1617,1618,1634],{},[659,1619,1620],{},[662,1621,1622,1625,1628,1631],{},[665,1623,1624],{},"属性（Props）",[665,1626,1627],{},"类型",[665,1629,1630],{},"默认",[665,1632,1633],{},"说明",[678,1635,1636,1658,1677,1696,1715,1737,1758,1777,1794],{},[662,1637,1638,1642,1646,1650],{},[683,1639,1640],{},[21,1641,687],{},[683,1643,1644],{},[21,1645,692],{},[683,1647,1648],{},[21,1649,273],{},[683,1651,1652,1653,1655,1656],{},"当前进度值（确定态生效，",[21,1654,702],{},"）；对齐 WinUI ",[21,1657,706],{},[662,1659,1660,1664,1668,1672],{},[683,1661,1662],{},[21,1663,159],{},[683,1665,1666],{},[21,1667,692],{},[683,1669,1670],{},[21,1671,273],{},[683,1673,1674,1675],{},"最小值；对齐 WinUI ",[21,1676,726],{},[662,1678,1679,1683,1687,1691],{},[683,1680,1681],{},[21,1682,163],{},[683,1684,1685],{},[21,1686,692],{},[683,1688,1689],{},[21,1690,286],{},[683,1692,1693,1694],{},"最大值；对齐 WinUI ",[21,1695,746],{},[662,1697,1698,1702,1706,1710],{},[683,1699,1700],{},[21,1701,753],{},[683,1703,1704],{},[21,1705,758],{},[683,1707,1708],{},[21,1709,763],{},[683,1711,1712,1713],{},"不确定态；对齐 WinUI ",[21,1714,769],{},[662,1716,1717,1721,1725,1729],{},[683,1718,1719],{},[21,1720,315],{},[683,1722,1723],{},[21,1724,758],{},[683,1726,1727],{},[21,1728,763],{},[683,1730,1731,1732,1655,1734,1736],{},"出错态（填充 ",[21,1733,80],{},[21,1735,318],{},"，优先于 paused",[662,1738,1739,1743,1747,1751],{},[683,1740,1741],{},[21,1742,308],{},[683,1744,1745],{},[21,1746,758],{},[683,1748,1749],{},[21,1750,763],{},[683,1752,1753,1754,1655,1756],{},"暂停态（填充 ",[21,1755,76],{},[21,1757,311],{},[662,1759,1760,1764,1768,1772],{},[683,1761,1762],{},[21,1763,819],{},[683,1765,1766],{},[21,1767,824],{},[683,1769,1770],{},[21,1771,829],{},[683,1773,1774,1775],{},"轨道色（任意 CSS 颜色）；对齐 WinUI ",[21,1776,515],{},[662,1778,1779,1783,1787,1791],{},[683,1780,1781],{},[21,1782,591],{},[683,1784,1785],{},[21,1786,758],{},[683,1788,1789],{},[21,1790,763],{},[683,1792,1793],{},"禁用（前景降级 …Disabled 档，本库约定）",[662,1795,1796,1800,1804,1808],{},[683,1797,1798],{},[21,1799,858],{},[683,1801,1802],{},[21,1803,824],{},[683,1805,1806],{},[21,1807,829],{},[683,1809,1810,1811,1813],{},"可访问名称（",[21,1812,872],{},"）",[875,1815,1816,1849,1854],{},[14,1817,1818,1821,1822,886,1824,1826,1827,1829,1830,1833,1834,1836,1837,1839,1840,1842,1843,1845,1846,1848],{},[36,1819,1820],{},"无障碍","：确定态渲染 ",[21,1823,885],{},[21,1825,889],{}," + 百分比 ",[21,1828,893],{},"；不确定态",[36,1831,1832],{},"不暴露 RangeValue 语义","（对齐 ",[21,1835,901],{}," 在 ",[21,1838,769],{}," 时返回 ",[21,1841,905],{},"）。WinUI 会在 Error \u002F Paused \u002F Indeterminate 时给可访问名加本地化状态前缀（",[21,1844,912],{}," 等），本库暂无组件内建文案通道（i18n 属 0.3.0 目标 1.4），需要时请在 ",[21,1847,858],{}," 中自行体现。",[14,1850,1851],{},[36,1852,1853],{},"实现要点",[30,1855,1856,1879,1917,1944,1952],{},[33,1857,1858,1859,1107,1861,349,1863,1865,1866,1868,1869,1871,1872,1875,1876,1878],{},"语义底座复用 reka-ui 的 ",[21,1860,929],{},[21,1862,932],{},[21,1864,935],{},"），但它的值域固定为 ",[21,1867,939],{}," 且不允许负 ",[21,1870,159],{},"，因此传给它的是",[36,1873,1874],{},"归一化","值域，",[21,1877,950],{}," 由组件按 WinUI 原始值域显式覆盖。",[33,1880,1881,1882,1884,1885,1887,1888,1890,1891,1893,1894,1896,1897,1899,1900,1107,1902,1904,1905,1907,1908,1107,1910,1912,1913,1916],{},"不确定态两条滑块的位移全部来自 ",[21,1883,957],{},"：以 ",[21,1886,961],{}," 为控件宽，",[21,1889,965],{},"、",[21,1892,969],{},"；滑块 1 位移 ",[21,1895,973],{},"（即自身宽的 ",[21,1898,977],{},"，1.5s 走完、2s 前保持），滑块 2 位移 ",[21,1901,981],{},[21,1903,984],{},"，0.75s 起走、2s 到达）。XAML 的关键帧缓动是 ",[21,1906,988],{},"（标准 ease-in-out），Fluent token 表无同值项，取语义位最近的 ",[21,1909,992],{},[21,1911,995],{},"）：冻结帧 7 点采样实测最大偏差 ",[36,1914,1915],{},"5.64px \u002F 246.5px 行程 ≈ 2.3%","，仅影响 tween 曲线，首尾位置与 WinUI 完全一致。",[33,1918,1919,1920,1923,1924,1926,1927,1929,1930,1932,1933,1935,1936,1938,1939,886,1941,1943],{},"确定态的填充是",[36,1921,1922],{},"像素宽","（WinUI 直接设 ",[21,1925,1010],{},"），本库以百分比等价表达；值变化时的补间在 WinUI 侧走 ",[21,1928,1014],{}," 的 ",[21,1931,1017],{},"（未显式给 Duration，默认时长不在 ",[21,1934,23],{}," 快照内，取不到 A 级证据），本库用 ",[21,1937,229],{}," 过渡（",[21,1940,1027],{},[21,1942,1030],{},"）表达同一意图。",[33,1945,1946,1947,1949,1950,1131],{},"暂停 \u002F 出错的变色是 XAML 里显式的 ",[21,1948,1036],{},"，本库按仓库对 167ms 的统一近似取 ",[21,1951,1040],{},[33,1953,1954,1955,1957],{},"动效遵循 ",[21,1956,1047],{},"：关闭时不确定态留下「一条 40% 宽的静态指示条停在左端」，paused \u002F error 停在满格终态，不会出现空白条。",[1050,1959,1052],{},{"title":98,"searchDepth":246,"depth":246,"links":1961},[1962,1963,1964,1965,1966],{"id":1173,"depth":246,"text":1173},{"id":1304,"depth":246,"text":1305},{"id":1480,"depth":246,"text":1481},{"id":1560,"depth":246,"text":1560},{"id":653,"depth":246,"text":654},"线性进度指示：不确定（滑块循环）与确定（按比例填充）两种形态，样式还原 WinUI 3 ProgressBar。",{},{"title":1074},"\u002Fcomponents\u002Fprogress",{"title":1074,"description":1967},"components\u002Fprogress","gNu69UzXkpOaYnB_SP1xhFAfNKM3iDY17WLwOCD-yGs",1792150932361]