<h2 class="mb-3">
How it works
</h2>
<div class="mb-3">
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>
</div>
</div>
<div class="mb-3">
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%;"></div>
</div>
</div>
<div class="mb-3">
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;"></div>
</div>
</div>
<div class="mb-3">
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%;"></div>
</div>
</div>
<div class="mb-3">
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;"></div>
</div>
</div>
<hr />
<h2 class="mb-3">
Variants
</h2>
<div class="mb-3">
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%;">
25%
</div>
</div>
</div>
<hr />
<h2 class="mb-3">
Height
</h2>
<div class="mb-3">
<div class="progress" style="height: 1px" ;>
<div class="progress-bar" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%;"></div>
</div>
</div>
<div class="mb-3">
<div class="progress" style="height: 20px" ;>
<div class="progress-bar" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%;"></div>
</div>
</div>
<hr />
<h2 class="mb-3">
Backgrounds
</h2>
<div class="mb-3">
<div class="progress">
<div class="progress-bar bg-success" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%;"></div>
</div>
</div>
<div class="mb-3">
<div class="progress">
<div class="progress-bar bg-info" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;"></div>
</div>
</div>
<div class="mb-3">
<div class="progress">
<div class="progress-bar bg-warning" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%;"></div>
</div>
</div>
<div class="mb-3">
<div class="progress">
<div class="progress-bar bg-danger" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;"></div>
</div>
</div>
<hr />
<h2 class="mb-3">
Multiple bars
</h2>
<div class="mb-3">
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100" style="width: 15%;"></div>
<div class="progress-bar bg-success" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%;"></div>
<div class="progress-bar bg-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%;"></div>
</div>
</div>
<hr />
<h2 class="mb-3">
How it works
</h2>
<div class="mb-3">
<div class="progress">
<div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" style="width: 10%;"></div>
</div>
</div>
<div class="mb-3">
<div class="progress">
<div class="progress-bar bg-success progress-bar-striped" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%;"></div>
</div>
</div>
<div class="mb-3">
<div class="progress">
<div class="progress-bar bg-info progress-bar-striped" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;"></div>
</div>
</div>
<div class="mb-3">
<div class="progress">
<div class="progress-bar bg-warning progress-bar-striped" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%;"></div>
</div>
</div>
<div class="mb-3">
<div class="progress">
<div class="progress-bar bg-danger progress-bar-striped" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;"></div>
</div>
</div>
<hr />
<h2 class="mb-3">
Animated stripes
</h2>
<div class="mb-3">
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%;"></div>
</div>
</div>
<hr />
{% block main %}
{% for section in sections %}
{% if section %}
{% if section.title %}
<h2 class="mb-3">
{{ section.title }}
</h2>
{% endif %}
{% for variant in section.variants %}
<div class="mb-3">
{% include '@atom-progress' with variant %}
</div>
{% endfor %}
{% endif %}
<hr />
{% endfor %}
{% endblock %}
{
"sections": [
{
"title": "How it works",
"variants": [
{
"bars": [
{
"progress": 0
}
]
},
{
"bars": [
{
"progress": 25
}
]
},
{
"bars": [
{
"progress": 50
}
]
},
{
"bars": [
{
"progress": 75
}
]
},
{
"bars": [
{
"progress": 100
}
]
}
]
},
{
"title": "Variants",
"variants": [
{
"bars": [
{
"progress": 25,
"label": true
}
]
}
]
},
{
"title": "Height",
"variants": [
{
"bars": [
{
"progress": 25
}
],
"height": "1px"
},
{
"bars": [
{
"progress": 25
}
],
"height": "20px"
}
]
},
{
"title": "Backgrounds",
"variants": [
{
"bars": [
{
"progress": 25,
"bg": "success"
}
]
},
{
"bars": [
{
"progress": 50,
"bg": "info"
}
]
},
{
"bars": [
{
"progress": 75,
"bg": "warning"
}
]
},
{
"bars": [
{
"progress": 100,
"bg": "danger"
}
]
}
]
},
{
"title": "Multiple bars",
"variants": [
{
"bars": [
{
"progress": 15
},
{
"progress": 30,
"bg": "success"
},
{
"progress": 20,
"bg": "info"
}
]
}
]
},
{
"title": "How it works",
"variants": [
{
"bars": [
{
"progress": 10,
"striped": true
}
]
},
{
"bars": [
{
"progress": 25,
"striped": true,
"bg": "success"
}
]
},
{
"bars": [
{
"progress": 50,
"striped": true,
"bg": "info"
}
]
},
{
"bars": [
{
"progress": 75,
"striped": true,
"bg": "warning"
}
]
},
{
"bars": [
{
"progress": 100,
"striped": true,
"bg": "danger"
}
]
}
]
},
{
"title": "Animated stripes",
"variants": [
{
"bars": [
{
"progress": 75,
"striped": true,
"animatedStripes": true
}
]
}
]
}
]
}
No notes defined.