W3.CSS — Progress Bars

Basic Progress Bar

<div class="w3-light-grey w3-round">
    <div class="w3-container w3-blue w3-round" style="width:50%">50%</div>
</div>

Progress Bar Colors

<!-- Red -->
<div class="w3-light-grey w3-round">
    <div class="w3-container w3-red w3-round" style="width:30%">30%</div>
</div>

<!-- Green -->
<div class="w3-light-grey w3-round">
    <div class="w3-container w3-green w3-round" style="width:70%">70%</div>
</div>

<!-- Orange -->
<div class="w3-light-grey w3-round">
    <div class="w3-container w3-orange w3-round" style="width:90%">90%</div>
</div>

Progress Bar Sizes

<!-- Thin -->
<div class="w3-light-grey w3-round" style="height:10px">
    <div class="w3-container w3-blue w3-round" style="width:50%;height:10px"></div>
</div>

<!-- Normal -->
<div class="w3-light-grey w3-round">
    <div class="w3-container w3-blue w3-round" style="width:50%">50%</div>
</div>

<!-- Thick -->
<div class="w3-light-grey w3-round" style="height:40px">
    <div class="w3-container w3-blue w3-round" style="width:50%;height:40px;line-height:40px">50%</div>
</div>

Progress Bar Examples

<!-- Skill bars -->
<h4>HTML</h4>
<div class="w3-light-grey w3-round">
    <div class="w3-container w3-green w3-round" style="width:90%">90%</div>
</div>

<h4>CSS</h4>
<div class="w3-light-grey w3-round">
    <div class="w3-container w3-blue w3-round" style="width:80%">80%</div>
</div>

<h4>JavaScript</h4>
<div class="w3-light-grey w3-round">
    <div class="w3-container w3-orange w3-round" style="width:70%">70%</div>
</div>

<!-- Loading bar -->
<div class="w3-light-grey w3-round" style="height:20px">
    <div class="w3-container w3-blue w3-round" style="width:60%;height:20px">Loading 60%...</div>
</div>

Striped Progress Bar

<div class="w3-light-grey w3-round">
    <div class="w3-container w3-blue w3-round w3-striped" style="width:60%">60%</div>
</div>

Mini Practice

Create HTML code that:

Creates a basic progress bar
Adds different colored progress bars
Creates skill bars
Uses striped progress bar

Up Next

Next: Learn about W3.CSS Pagination.

Frequently Asked Questions about Progress Bars

What is Progress Bars in W3.CSS?

Progress Bars is a fundamental concept in W3.CSS. This lesson explains it step by step with clear examples, making it easy for beginners to understand.

How do I learn Progress Bars?

Start by reading the explanation above, then try the code examples. Practice by modifying the examples and experimenting with different values. Hands-on practice is the best way to learn Progress Bars.

Why is Progress Bars important in W3.CSS?

Progress Bars is essential for W3.CSS development. Understanding this concept will help you write better code and solve real-world problems more effectively.