Bootstrap - Spinners


Kreiranje Spinnera sa Bootstrap-om

Bootstrap 4 predstavlja novu komponentu Spinnera pomoću koje možete prikazati stanje učitavanja u svojim projektima. Spinneri obično učitavaju ikone i grade se samo sa HTML-om i CSS-om. Međutim, potreban vam je prilagođeni JavaScript da biste ih prikazali ili sakrili na web stranici. Štoviše, lako možete prilagoditi izgled, poravnanje i veličinu Spinnera pomoću unaprijed definisanih klasa. Sada, da vidimo kako ih kreirati. Da biste kreirali spinner ili indikator učitavanja, možete koristiti klasu .spinner-border:

<div class="spinner-border">
    <span class="sr-only">Loading...</span>
</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 Border Spinner</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="spinner-border">
        <span class="sr-only">Loading...</span>
    </div>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:

Loading...


Kreiranje spinnera u različitim bojama

Možete koristiti klase korisnih programa za tekst da biste prilagodili boju spinnera.

<div class="spinner-border text-primary">
    <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-secondary">
    <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-success">
    <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-danger">
    <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-warning">
    <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-info">
    <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-dark">
    <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-light">
    <span class="sr-only">Loading...</span>
</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 Spinners u različitim bojama</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="spinner-border text-primary">
        <span class="sr-only">Loading...</span>
    </div>
    <div class="spinner-border text-secondary">
        <span class="sr-only">Loading...</span>
    </div>
    <div class="spinner-border text-success">
        <span class="sr-only">Loading...</span>
    </div>
    <div class="spinner-border text-danger">
        <span class="sr-only">Loading...</span>
    </div>
    <div class="spinner-border text-warning">
        <span class="sr-only">Loading...</span>
    </div>
    <div class="spinner-border text-info">
        <span class="sr-only">Loading...</span>
    </div>
    <div class="spinner-border text-dark">
        <span class="sr-only">Loading...</span>
    </div>
    <div class="spinner-border text-light">
        <span class="sr-only">Loading...</span>
    </div>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:

Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...


Kreiranje rastućih spinnera

Takođe možete stvoriti rastuće spinnere koje više puta rastu i nestaju, poput sljedećeg primjera:

<div class="spinner-grow">
    <span class="sr-only">Loading...</span>
</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 Rastući Spinner</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="spinner-grow">
        <span class="sr-only">Loading...</span>
    </div>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:

Loading...

Takođe, poput border spinnera možete prilagoditi boje rastućih spinnera koristeći klase tekstualnih boja, kao što je prikazano u sljedećem primjeru:

<div class="spinner-grow text-primary">
    <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-secondary">
    <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-success">
    <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-danger">
    <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-warning">
    <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-info">
    <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-light">
    <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-dark">
    <span class="sr-only">Loading...</span>
</div>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:

Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...


Veličina spinners

Možete koristiti klase .spinner-border-sm i .spinner-grow-sm da napravite manji spiner koji se može brzo koristiti u drugim komponentama, poput dugmadi.

<div class="spinner-border spinner-border-sm">
    <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow spinner-grow-sm">
    <span class="sr-only">Loading...</span>
</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 Mali (Small) Spinners</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="spinner-border spinner-border-sm">
        <span class="sr-only">Loading...</span>
    </div>
    <div class="spinner-grow spinner-grow-sm">
        <span class="sr-only">Loading...</span>
    </div>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:

Loading...
Loading...

Takođe možete koristiti prilagođeni CSS ili ugrađeni stilovi da biste po potrebi promijenili veličinu.

<div class="spinner-border" style="width: 40px; height: 40px;">
    <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow" style="width: 40px; height: 40px;">
    <span class="sr-only">Loading...</span>
</div>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:

Loading...
Loading...


Korištenje spinners unutar dugmadi

Takođe možete koristiti spinner unutar dugmadi da naznačite da li se radnja trenutno obrađuje ili odvija. Evo primjera gdje smo spinner postavili unutar onemogućenih tipki.

<!-- Border spinner unutar dugmeta -->
<button class="btn btn-primary" type="button" disabled>
    <span class="spinner-border spinner-border-sm"></span>
    <span class="sr-only">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
    <span class="spinner-border spinner-border-sm"></span>
    Loading...
</button>  
<!-- Rastući spinner unutar dugmeta -->
<button class="btn btn-primary" type="button" disabled>
    <span class="spinner-grow spinner-grow-sm"></span>
    <span class="sr-only">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
    <span class="spinner-grow spinner-grow-sm"></span>
    Loading...
</button>
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 Spinner unutar dugmeta</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">
    <!-- Border spinner unutar dugmeta -->
    <button class="btn btn-primary" type="button" disabled>
        <span class="spinner-border spinner-border-sm"></span>
        <span class="sr-only">Loading...</span>
    </button>
    <button class="btn btn-primary" type="button" disabled>
        <span class="spinner-border spinner-border-sm"></span>
        Loading...
    </button>  
    <!-- Rastući spinner unutar dugmeta -->
    <button class="btn btn-primary" type="button" disabled>
        <span class="spinner-grow spinner-grow-sm"></span>
        <span class="sr-only">Loading...</span>
    </button>
    <button class="btn btn-primary" type="button" disabled>
        <span class="spinner-grow spinner-grow-sm"></span>
        Loading...
    </button>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:



Poravnanje Spinnera

Lako možete poravnati spinner ulijevo, udesno ili u sredini koristeći klase flexbox, float ili text alignment. Isprobajte sljedeći primjer da vidite kako to zapravo funkcioniše:

<!-- Centriranje poravnanja pomoću flex uslužnih programa -->
<div class="d-flex justify-content-center">
    <div class="spinner-border" role="status">
        <span class="sr-only">Loading...</span>
    </div>
</div>

<!-- Centriranje poravnanja pomoću uslužnih programa za poravnavanje teksta -->
<div class="text-center">
    <div class="spinner-border" role="status">
        <span class="sr-only">Loading...</span>
    </div>
</div>

<!-- Desno poravnanje pomoću plutajućih (float) uslužnih programa -->
<div class="clearfix">
    <div class="spinner-border float-right" role="status">
        <span class="sr-only">Loading...</span>
    </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 Poravnanje Spinnera</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">
    <!-- Difoltno poravnanje lijevo -->
    <div>
        <div class="spinner-border" role="status">
            <span class="sr-only">Loading...</span>
        </div>
    </div>
    <hr />

    <!-- Centriranje poravnanja pomoću flex uslužnih programa -->
    <div class="d-flex justify-content-center">
        <div class="spinner-border" role="status">
            <span class="sr-only">Loading...</span>
        </div>
    </div>
    <hr />

    <!-- Centriranje poravnanja pomoću uslužnih programa za poravnavanje teksta -->
    <div class="text-center">
        <div class="spinner-border" role="status">
            <span class="sr-only">Loading...</span>
        </div>
    </div>
    <hr />
    
    <!-- Desno poravnanje pomoću plutajućih (float) uslužnih programa -->
    <div class="clearfix">
        <div class="spinner-border float-right" role="status">
            <span class="sr-only">Loading...</span>
        </div>
    </div>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:

Loading...

Loading...

Loading...

Loading...