{"meta":"<h2 id=\"Guide\">Guide <a class=\"header-anchor scroll-count-item\" href=\"#Guide\" data-scroll-id=\"Guide\">#</a></h2>\n<p>Progress used to show the progress of a task.</p>\n<h3 id=\"When To Use\">When to Use <a class=\"header-anchor scroll-count-item\" href=\"#When To Use\" data-scroll-id=\"When To Use\">#</a></h3>\n<p>If a task will take long time to complete, it could be use a <code>Progress</code> to show the progress. Such as:</p>\n<ul>\n<li>For a background operation with long time</li>\n<li>For a operation need to show its percentage</li>\n</ul>\n","api":"<h2 id=\"API\">API <a class=\"header-anchor scroll-count-item\" href=\"#API\" data-scroll-id=\"API\">#</a></h2>\n<h3 id=\"Progress\">Progress <a class=\"header-anchor scroll-count-item\" href=\"#Progress\" data-scroll-id=\"Progress\">#</a></h3>\n<table>\n<thead>\n<tr>\n<th>Param</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default Value</th>\n<th>Required</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>shape</td>\n<td>Shape</td>\n<td>&apos;circle&apos; | &apos;line&apos;</td>\n<td>&apos;line&apos;</td>\n<td></td>\n</tr>\n<tr>\n<td>size</td>\n<td>Size</td>\n<td>&apos;small&apos; | &apos;medium&apos; | &apos;large&apos;</td>\n<td>&apos;medium&apos;</td>\n<td></td>\n</tr>\n<tr>\n<td>percent</td>\n<td>Current percente of progress</td>\n<td>number</td>\n<td>0</td>\n<td></td>\n</tr>\n<tr>\n<td>state</td>\n<td>State of progress, priority: color &gt; progressive &gt; state</td>\n<td>&apos;normal&apos; | &apos;success&apos; | &apos;error&apos;</td>\n<td>&apos;normal&apos;</td>\n<td></td>\n</tr>\n<tr>\n<td>progressive</td>\n<td>Progressive mode (with dynamic color), priority: color &gt; progressive &gt; state</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n</tr>\n<tr>\n<td>hasBorder</td>\n<td>Has border for progress line</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n</tr>\n<tr>\n<td>textRender</td>\n<td>Text render<br><br><strong>signature</strong>:<br><strong>params</strong>:<br><em>percent</em>: Current percent<br><em>option</em>: Additional options<br><strong>return</strong>:<br>Text node</td>\n<td>(percent: number, option?: {rtl?: boolean}) =&gt; React.ReactNode</td>\n<td>percent =&gt; `${Math.floor(percent)}%`</td>\n<td></td>\n</tr>\n<tr>\n<td>color</td>\n<td>Progressbar color, priority: color &gt; progressive &gt; state</td>\n<td>string</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>backgroundColor</td>\n<td>Background color</td>\n<td>string</td>\n<td>-</td>\n<td></td>\n</tr>\n</tbody>\n</table>\n"}