Bootstrap - Progress bar


Kreiranje progess bara sa Bootstrap-om

Progres bar se koristiti za prikazivanje napretka zadatka ili radnje korisnicima. Sljedeći primjer će vam pokazati kako stvoriti jednostavan proges bar s vertikalnim gradijentom.

<div class="progress">
    <div class="progress-bar" style="width: 50%"></div>
</div>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 4 Progress Bar</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<style>
    .bs-example{
        margin: 20px;        
    }
    /* Adding space at the bottom of progress bar */
    .progress{
        margin-bottom: 1rem;
    }
</style>
</head>
<body>
<div class="bs-example">
    <div class="progress">
        <div class="progress-bar" style="width: 25%"></div>
    </div>
    <div class="progress">
        <div class="progress-bar" style="width: 50%"></div>
    </div>
    <div class="progress">
        <div class="progress-bar" style="width: 75%"></div>
    </div>
    <div class="progress">
        <div class="progress-bar" style="width: 100%"></div>
    </div>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:



Kreiranje Progress Bar sa Label

Da biste kreiranje Progress Bar sa Label, samo uklonite <span> pomoću klase .sr-only proges bara, kao što je prikazano u prethodnom primjeru.

<div class="progress">
    <div class="progress-bar" style="width: 60%">
        60%
    </div>
</div>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 4 Progress Bar sa Label</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<style>
    .bs-example{
        margin: 20px;        
    }
    /* Adding space at the bottom of progress bar */
    .progress{
        margin-bottom: 1rem;
    }
</style>
</head>
<body>
<div class="bs-example">
    <div class="progress">
        <div class="progress-bar" style="width: 25%">
            25%
        </div>
    </div>
    <div class="progress">
        <div class="progress-bar" style="width: 50%">
            50%
        </div>
    </div>
    <div class="progress">
        <div class="progress-bar" style="width: 75%">
            75%
        </div>
    </div>
    <div class="progress">
        <div class="progress-bar" style="width: 100%">
            100%
        </div>
    </div>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:

25%
50%
75%
100%

Ako prikazujete oznaku postotka, trebali biste primijeniti i minimalnu širinu na progres bar kako biste osigurali da tekst naljepnice ostane čitljiv čak i za nizak postotak. Pogledajmo primjer:

<div class="progress">
    <div class="progress-bar" style="min-width: 20px;">
        0%
    </div>
</div>
<div class="progress">
    <div class="progress-bar" style="min-width: 20px; width: 2%;">
        2%
    </div>
</div>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:

0%
2%


Postavljanje visine progress bar-a

Zadana visina progress bar-a je 16px, ali možete je postaviti i prema vašoj potrebi postavljanjem CSS svojstva visine na element .progress, ovako:

<!-- Progress bar sa 1px visine -->
<div class="progress" style="height: 1px;">
    <div class="progress-bar" style="width: 50%;"></div>
</div>
<!-- Progress bar sa 20px visne -->
<div class="progress" style="height: 20px;">
    <div class="progress-bar" style="width: 50%;"></div>
</div>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 4 Kreiranje visine Progress Bar-a</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<style>
    .bs-example{
        margin: 20px;        
    }
    /* Dodavanje razmaka između progess bar-a */
    .progress{
        margin-bottom: 1rem;
    }
</style>
</head>
<body>
<div class="bs-example">
    <!-- Progress bar sa 1px visne -->
    <div class="progress" style="height: 1px;">
        <div class="progress-bar" style="width: 50%;"></div>
    </div>
    <!-- Progress bar sa 20px visne -->
    <div class="progress" style="height: 20px;">
        <div class="progress-bar" style="width: 50%;"></div>
    </div>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:



Kreiranje stripped progress bar-a

Da biste kreirali stripped progress bar, samo dodajte dodatnu klasu .progress-bar-striped u element .progress-bar, kao što je prikazano u sljedećem primjeru:

<div class="progress">
    <div class="progress-bar progress-bar-striped" style="width: 60%;"></div>
</div>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 4 Stripped Progress Bars</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<style>
    .bs-example{
        margin: 20px;        
    }
</style>
</head>
<body>
<div class="bs-example">
    <div class="progress">
        <div class="progress-bar progress-bar-striped" style="width: 60%;"></div>
    </div>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:



Kreiranje animiranog progress bar-a

Možete i animirati progress bar. Dodajte klasu .progress-bar-animated elementu .progress-bar , animiraće pruge s desna na lijevo putem CSS3 animacija.

<div class="progress">
    <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 60%"></div>
</div>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 4 Animirani Progress Bar</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<style>
    .bs-example{
        margin: 20px;        
    }
</style>
</head>
<body>
<div class="bs-example">
    <div class="progress">
        <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 60%"></div>
    </div>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:



Dinamičko mijenjanje vrijednosti progess bar-a

Statički progess bar-ovim nisu baš impresivne. Sljedeći primjer će vam dati približnu ideju kako dinamički ažurirati Bootstrap progess bar pomoću jQuery-a.

<!-- Progress bar HTML -->
<div class="progress">
    <div class="progress-bar progress-bar-striped" style="min-width: 20px;"></div>
</div>
    
<!-- jQuery Script -->
<script type="text/javascript">
    var i = 0;
    function makeProgress(){
        if(i < 100){
            i = i + 1;
            $(".progress-bar").css("width", i + "%").text(i + " %");
        }
        // Pričekajte neko vrijeme prije ponovnog pokretanja ove skripte
        setTimeout("makeProgress()", 100);
    }
    makeProgress();
</script>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 4 Dinamička promjena vrijednosti progress bar-a </title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<style>
    .bs-example{
        margin: 20px;        
    }
</style>
</head>
<body>
<div class="bs-example">
    <!-- Progress bar HTML -->
    <div class="progress">
        <div class="progress-bar progress-bar-striped" style="min-width: 20px;"></div>
    </div>

    <!-- jQuery Script -->
    <script>
        var i = 0;
        function makeProgress(){
            if(i < 100){
                i = i + 1;
                $(".progress-bar").css("width", i + "%").text(i + " %");
            }
            // Pričekajte neko vrijeme prije ponovnog pokretanja ove skripte
            setTimeout("makeProgress()", 100);
        }
        makeProgress();
    </script>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:



Kreiranje naslaganog progess bar-a

Takođe možete smjestiti više progess bar-ova u istu traku da biste ih slagali jedan pored drugog.

<div class="progress">
    <div class="progress-bar bg-success" style="width: 40%">
        HTML5-CSS3 (40%)
    </div>
    <div class="progress-bar bg-warning" style="width: 25%">
        JavaScript (25%)
    </div>
    <div class="progress-bar bg-danger" style="width: 15%">
        Bootstrap 4 (15%)
    </div>
</div>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 4 Naslagani Progress Bar</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<style>
    .bs-example{
        margin: 20px;        
    }
</style>
</head>
<body>
<div class="bs-example">
    <div class="progress">
        <div class="progress-bar bg-success" style="width: 40%">
            HTML5-CSS3 (40%)
        </div>
        <div class="progress-bar bg-warning" style="width: 25%">
            JavaScript (25%)
        </div>
        <div class="progress-bar bg-danger" style="width: 15%">
            Bootstrap 4 (15%)
        </div>
    </div>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:

HTML5-CSS3 (40%)
JavaScript (25%)
Bootstrap 4 (15%)


Naglašeni progress bar

Bootstrap takođe nudi neke klase korisnih programa za naglašavanje progress bar-a koje se dalje mogu koristiti za prenošenje značenja kroz boju, kao što je prikazano u sljedećem primjeru:

<div class="progress">
    <div class="progress-bar bg-info" style="width: 20%"></div>
</div>
<div class="progress">
    <div class="progress-bar bg-success" style="width: 40%"></div>
</div>
<div class="progress">
    <div class="progress-bar bg-warning" style="width: 80%"></div>
</div>
<div class="progress">
    <div class="progress-bar bg-danger" style="width: 90%"></div>
</div>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 4 Naglašeni Progress Bar</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<style>
    .bs-example{
        margin: 20px;        
    }
    /* Dodavanje prostora na dnu progess bar-a */
    .progress{
        margin-bottom: 1rem;
    }
</style>
</head>
<body>
<div class="bs-example">
    <div class="progress">
        <div class="progress-bar bg-info" style="width: 20%"></div>
    </div>
    <div class="progress">
        <div class="progress-bar bg-success" style="width: 40%"></div>
    </div>
    <div class="progress">
        <div class="progress-bar bg-warning" style="width: 80%"></div>
    </div>
    <div class="progress">
        <div class="progress-bar bg-danger" style="width: 90%"></div>
    </div>
    <hr />
    <div class="progress">
        <div class="progress-bar bg-info" style="width: 20%">
            Prostor diska: 80% slobodno
        </div>
    </div>
    <div class="progress">
        <div class="progress-bar bg-success" style="width: 40%">
            Iskorištenost prostora: 60% slobodno
        </div>
    </div>
    <div class="progress">
        <div class="progress-bar bg-warning" style="width: 80%">
            Mali prostor na disku: 80% popunjeno
        </div>
    </div>
    <div class="progress">
        <div class="progress-bar bg-danger" style="width: 90%">
            Nema dovoljno prostora na disku: 90% popunjeno
        </div>
    </div>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:


Prostor diska: 80% slobodno
Iskorištenost prostora: 60% free
Mali prostor na disku: 80% popunjeno
Nema dovoljno prostora na disku: 90% popunjeno


Naglašene klase Striped Progress Bar-a

Slično kao u jednobojnim progess bar, takođe možete stvoriti raznolike prugaste progess bar-ove.

<div class="progress">
    <div class="progress-bar progress-bar-striped bg-info" style="width: 20%"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-striped bg-success" style="width: 40%"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-striped bg-warning" style="width: 80%"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-striped bg-danger" style="width: 90%"></div>
</div>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 4 Naglašene klase Striped Progress Bar-a</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<style>
    .bs-example{
        margin: 20px;        
    }
    /* Dodavanje prostora na dnu progess bar-a */
    .progress{
        margin-bottom: 1rem;
    }
</style>
</head>
<body>
<div class="bs-example">
    <div class="progress">
        <div class="progress-bar progress-bar-striped bg-info" style="width: 20%"></div>
    </div>
    <div class="progress">
        <div class="progress-bar progress-bar-striped bg-success" style="width: 40%"></div>
    </div>
    <div class="progress">
        <div class="progress-bar progress-bar-striped bg-warning" style="width: 80%"></div>
    </div>
    <div class="progress">
        <div class="progress-bar progress-bar-striped bg-danger" style="width: 90%"></div>
    </div>
    <hr />
    <div class="progress">
        <div class="progress-bar progress-bar-striped bg-info" style="width: 20%">
            Prostor diska: 80% slobodno
        </div>
    </div>
    <div class="progress">
        <div class="progress-bar progress-bar-striped bg-success" style="width: 40%">
            Iskorištenost prostora: 60% slobodno
        </div>
    </div>
    <div class="progress">
        <div class="progress-bar progress-bar-striped bg-warning" style="width: 80%">
            Mali prostor na disku: 80% popunjeno
        </div>
    </div>
    <div class="progress">
        <div class="progress-bar progress-bar-striped bg-danger" style="width: 90%">
            Nema dovoljno prostora na disku: 90% popunjeno
        </div>
    </div>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:


Prostor diska: 80% slobodno
Iskorištenost prostora: 60% slobodno
Mali prostor na disku: 80% popunjeno
Nema dovoljno prostora na disku: 90% popunjeno