پیشرفت
<div >
<div >
<h5>میله پیشرفت ساده</h5>
</div>
<div >
<div >
<div >
<div role="progressbar" aria-valuenow="0" aria-valuemin="0"
aria-valuemax="100">
<div ></div>
</div>
<div role="progressbar" aria-valuenow="25" aria-valuemin="0"
aria-valuemax="100">
<div ></div>
</div>
<div role="progressbar" aria-valuenow="37.5" aria-valuemin="0"
aria-valuemax="100">
<div ></div>
</div>
<div role="progressbar" aria-valuenow="50" aria-valuemin="0"
aria-valuemax="100">
<div ></div>
</div>
<div role="progressbar" aria-valuenow="62.5" aria-valuemin="0"
aria-valuemax="100">
<div ></div>
</div>
<div role="progressbar" aria-valuenow="75" aria-valuemin="0"
aria-valuemax="100">
<div ></div>
</div>
<div role="progressbar" aria-valuenow="82.5" aria-valuemin="0"
aria-valuemax="100">
<div ></div>
</div>
<div role="progressbar" aria-valuenow="95" aria-valuemin="0"
aria-valuemax="100">
<div ></div>
</div>
</div>
</div>
</div>
</div>
<div >
<div >
<h5>میله پیشرفت روشن همراه با متن</h5>
</div>
<div >
<div >
<div >
<div role="progressbar" aria-valuenow="0" aria-valuemin="0"
aria-valuemax="100">
<div > 12.5% </div>
</div>
<div role="progressbar" aria-valuenow="25" aria-valuemin="0"
aria-valuemax="100">
<div > 25% </div>
</div>
<div role="progressbar" aria-valuenow="37.5" aria-valuemin="0"
aria-valuemax="100">
<div > 37.5% </div>
</div>
<div role="progressbar" aria-valuenow="50" aria-valuemin="0"
aria-valuemax="100">
<div > 50% </div>
</div>
<div role="progressbar" aria-valuenow="62.5" aria-valuemin="0"
aria-valuemax="100">
<div > 62.5% </div>
</div>
<div role="progressbar" aria-valuenow="75" aria-valuemin="0"
aria-valuemax="100">
<div > 75% </div>
</div>
<div role="progressbar" aria-valuenow="82.5" aria-valuemin="0"
aria-valuemax="100">
<div > 82.5% </div>
</div>
<div role="progressbar" aria-valuenow="95" aria-valuemin="0"
aria-valuemax="100">
<div > 95% </div>
</div>
</div>
</div>
</div>
</div>
<div >
<div >
<h5>میله پیشرفت راه راه با انیمیشن</h5>
</div>
<div >
<div >
<div >
<div role="progressbar" aria-valuenow="0" aria-valuemin="0"
aria-valuemax="100">
<div > 12.5% </div>
</div>
<div role="progressbar" aria-valuenow="25" aria-valuemin="0"
aria-valuemax="100">
<div
> 25% </div>
</div>
<div role="progressbar" aria-valuenow="37.5" aria-valuemin="0"
aria-valuemax="100">
<div
> 37.5% </div>
</div>
<div role="progressbar" aria-valuenow="50" aria-valuemin="0"
aria-valuemax="100">
<div
> 50% </div>
</div>
<div role="progressbar" aria-valuenow="62.5" aria-valuemin="0"
aria-valuemax="100">
<div
> 62.5% </div>
</div>
<div role="progressbar" aria-valuenow="75" aria-valuemin="0"
aria-valuemax="100">
<div
> 75% </div>
</div>
<div role="progressbar" aria-valuenow="82.5" aria-valuemin="0"
aria-valuemax="100">
<div
> 82.5% </div>
</div>
<div role="progressbar" aria-valuenow="95" aria-valuemin="0"
aria-valuemax="100">
<div
> 95% </div>
</div>
</div>
</div>
</div>
</div>
<div >
<div >
<h5>اندازه های میله پیشرفت</h5>
</div>
<div >
<div >
<div role="progressbar" aria-valuenow="20" aria-valuemin="0"
aria-valuemax="100" ></div>
</div>
<div >
<div role="progressbar" aria-valuenow="40" aria-valuemin="0"
aria-valuemax="100" >اندازه میله نرمال</div>
</div>
<div >
<div role="progressbar" aria-valuenow="40" aria-valuemin="0"
aria-valuemax="100" >اندازه میله نرمال</div>
</div>
<div >
<div role="progressbar" aria-valuenow="50" aria-valuemin="0"
aria-valuemax="100" > ارتفاع 15px</div>
</div>
<div >
<div role="progressbar" aria-valuenow="50" aria-valuemin="0"
aria-valuemax="100" > ارتفاع 15px</div>
</div>
<div >
<div role="progressbar" aria-valuenow="60" aria-valuemin="0"
aria-valuemax="100" > ارتفاع 20px</div>
</div>
<div >
<div role="progressbar" aria-valuenow="70" aria-valuemin="0"
aria-valuemax="100" > ارتفاع 25px</div>
</div>
</div>
</div>
بارگزاری...
75% پردازش
52% بروزرسانی..
1 دقیقه
حذف
(85% باقیمانده)
1 دقیقه
<div >
<div >
<h5>مثال واقعی</h5>
</div>
<div >
<div >
<div >
<div >
<div >
<div >
<div>
<div >
<span role="status"
aria-hidden="true"></span>
بارگزاری...
</div>
<div >
<i ></i>
</div>
</div>
</div>
<div role="progressbar" aria-valuenow="0" aria-valuemin="0"
aria-valuemax="100">
<div ></div>
</div>
</div>
<div >
<div >
<div>
<div >
<b >75%</b> پردازش
</div>
<div >
<i ></i>
</div>
</div>
</div>
<div role="progressbar" aria-valuenow="0" aria-valuemin="0"
aria-valuemax="100">
<div ></div>
</div>
</div>
</div>
</div>
<div >
<div >
<div >
<div >
<div>
<div >
<b >52%</b> بروزرسانی..
</div>
<div >
<span >1 دقیقه</span>
</div>
</div>
</div>
<div role="progressbar" aria-valuenow="0" aria-valuemin="0"
aria-valuemax="100">
<div ></div>
</div>
</div>
<div >
<div >
<div>
<div >
<i ></i> حذف داده <small> (85% باقیمانده)</small>
</div>
<div >
<span >1 دقیقه</span>
</div>
</div>
</div>
<div role="progressbar" aria-valuenow="0" aria-valuemin="0"
aria-valuemax="100">
<div ></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>