径向进度
径向进度可用于显示任务的进度或时间的流逝。
| 类名 | 类型 | |
|---|---|---|
| radial-progress | 组件 | 显示径向进度 |
径向进度需要
--valueCSS 变量才能工作。
要更改大小，请使用--sizeCSS 变量，默认值为5rem.
要更改粗细，请使用--thicknessCSS 变量，默认值为大小的 10%。
对于径向进度，我们需要使用一个
div而不是progress标签，因为浏览器无法在其中显示文本progress标签，并且 Firefox 不会在其中呈现伪元素progress标签。
添加role="progressbar"使其也对屏幕阅读器可访问。
70%
<div class="$$radial-progress" style="--$$value:70;" aria-valuenow="70" role="progressbar">70%</div>
<div class="$$radial-progress" style="--$$value:70;" aria-valuenow="70" role="progressbar">70%</div>
{/* For TSX uncomment the commented types below */}
<div className="$$radial-progress" style={{ "--$$value": 70 } /* as React.CSSProperties */ }
aria-valuenow={70} role="progressbar">70%</div>
{/* For TSX uncomment the commented types below */}
<div className="$$radial-progress" style={{ "--$$value": 70 } /* as React.CSSProperties */ }
aria-valuenow={70} role="progressbar">70%</div>0%
20%
60%
80%
100%
<div class="$$radial-progress" style="--$$value:0;" aria-valuenow="0" role="progressbar">0%</div> <div class="$$radial-progress" style="--$$value:20;" aria-valuenow="20" role="progressbar">20%</div> <div class="$$radial-progress" style="--$$value:60;" aria-valuenow="60" role="progressbar">60%</div> <div class="$$radial-progress" style="--$$value:80;" aria-valuenow="80" role="progressbar">80%</div> <div class="$$radial-progress" style="--$$value:100;" aria-valuenow="100" role="progressbar">100%</div>
<div class="$$radial-progress" style="--$$value:0;" aria-valuenow="0" role="progressbar">0%</div>
<div class="$$radial-progress" style="--$$value:20;" aria-valuenow="20" role="progressbar">20%</div>
<div class="$$radial-progress" style="--$$value:60;" aria-valuenow="60" role="progressbar">60%</div>
<div class="$$radial-progress" style="--$$value:80;" aria-valuenow="80" role="progressbar">80%</div>
<div class="$$radial-progress" style="--$$value:100;" aria-valuenow="100" role="progressbar">100%</div>
{/* For TSX uncomment the commented types below */}
<div className="$$radial-progress" style={{"--$$value":0} /* as React.CSSProperties */ }
aria-valuenow={0} role="progressbar">0%</div>
<div className="$$radial-progress" style={{"--$$value":20} /* as React.CSSProperties */ }
aria-valuenow={20} role="progressbar">20%</div>
<div className="$$radial-progress" style={{"--$$value":60} /* as React.CSSProperties */ }
aria-valuenow={60} role="progressbar">60%</div>
<div className="$$radial-progress" style={{"--$$value":80} /* as React.CSSProperties */ }
aria-valuenow={80} role="progressbar">80%</div>
<div className="$$radial-progress" style={{"--$$value":100} /* as React.CSSProperties */ }
aria-valuenow={100} role="progressbar">100%</div>
{/* For TSX uncomment the commented types below */}
<div className="$$radial-progress" style={{"--$$value":0} /* as React.CSSProperties */ }
aria-valuenow={0} role="progressbar">0%</div>
<div className="$$radial-progress" style={{"--$$value":20} /* as React.CSSProperties */ }
aria-valuenow={20} role="progressbar">20%</div>
<div className="$$radial-progress" style={{"--$$value":60} /* as React.CSSProperties */ }
aria-valuenow={60} role="progressbar">60%</div>
<div className="$$radial-progress" style={{"--$$value":80} /* as React.CSSProperties */ }
aria-valuenow={80} role="progressbar">80%</div>
<div className="$$radial-progress" style={{"--$$value":100} /* as React.CSSProperties */ }
aria-valuenow={100} role="progressbar">100%</div>70%
<div class="$$radial-progress text-primary" style="--$$value:70;" aria-valuenow="70" role="progressbar">70%</div>
<div class="$$radial-progress text-primary" style="--$$value:70;" aria-valuenow="70" role="progressbar">70%</div>
{/* For TSX uncomment the commented types below */}
<div className="$$radial-progress text-primary" style={{ "--$$value": 70 } /* as React.CSSProperties */ } aria-valuenow={70} role="progressbar">
70%
</div>
{/* For TSX uncomment the commented types below */}
<div className="$$radial-progress text-primary" style={{ "--$$value": 70 } /* as React.CSSProperties */ } aria-valuenow={70} role="progressbar">
70%
</div>70%
<div class="$$radial-progress bg-primary text-primary-content border-primary border-4" style="--$$value:70;" aria-valuenow="70" role="progressbar"> 70% </div>
<div
class="$$radial-progress bg-primary text-primary-content border-primary border-4"
style="--$$value:70;" aria-valuenow="70" role="progressbar">
70%
</div>
{/* For TSX uncomment the commented types below */}
<div
className="$$radial-progress bg-primary text-primary-content border-primary border-4"
style={{ "--$$value": 70 } /* as React.CSSProperties */ } aria-valuenow={70} role="progressbar">
70%
</div>
{/* For TSX uncomment the commented types below */}
<div
className="$$radial-progress bg-primary text-primary-content border-primary border-4"
style={{ "--$$value": 70 } /* as React.CSSProperties */ } aria-valuenow={70} role="progressbar">
70%
</div>70%
70%
<div class="$$radial-progress" style="--$$value:70; --$$size:12rem; --$$thickness: 2px;" aria-valuenow="70" role="progressbar">70%</div> <div class="$$radial-progress" style="--$$value:70; --$$size:12rem; --$$thickness: 2rem;" aria-valuenow="70" role="progressbar">70%</div>
<div class="$$radial-progress" style="--$$value:70; --$$size:12rem; --$$thickness: 2px;" aria-valuenow="70" role="progressbar">70%</div>
<div class="$$radial-progress" style="--$$value:70; --$$size:12rem; --$$thickness: 2rem;" aria-valuenow="70" role="progressbar">70%</div>
{/* For TSX uncomment the commented types below */}
<div className="$$radial-progress"
style={{ "--$$value": "70", "--$$size": "12rem", "--$$thickness": "2px" } /* as React.CSSProperties */ }
aria-valuenow={70} role="progressbar">70%</div>
<div className="$$radial-progress"
style={{ "--$$value": "70", "--$$size": "12rem", "--$$thickness": "2rem" } /* as React.CSSProperties */ }
aria-valuenow={70} role="progressbar">70%</div>
{/* For TSX uncomment the commented types below */}
<div className="$$radial-progress"
style={{ "--$$value": "70", "--$$size": "12rem", "--$$thickness": "2px" } /* as React.CSSProperties */ }
aria-valuenow={70} role="progressbar">70%</div>
<div className="$$radial-progress"
style={{ "--$$value": "70", "--$$size": "12rem", "--$$thickness": "2rem" } /* as React.CSSProperties */ }
aria-valuenow={70} role="progressbar">70%</div>您有问题吗？ 在 GitHub 上提问 或 Discord 服务器
您发现错误了吗？ 在 GitHub 上提交 issue
您喜欢 daisyUI 吗？ 发帖宣传一下吧！
支持 daisyUI 的开发： Open Collective
