Jak na to - CSS Loader
Naučte se, jak vytvořit preloader pomocí CSS.
Jak vytvořit Loader
Krok 1) Přidejte HTML:
Příklad
<div class="loader"></div>
Krok 2) Přidejte CSS:
Příklad
.loader {
border: 16px solid #f3f3f3; /* Light grey */
border-top: 16px solid #3498db; /* Blue */
border-radius: 50%;
width: 120px;
height: 120px;
animation:
spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform:
rotate(360deg); }
}
Příklad vysvětlen
Vlastnost border
určuje velikost okraje a barvu okraje zavaděče. Tato border-radius
vlastnost přemění nakladač na kruh.
Modrá věc, která se točí uvnitř ohraničení, je specifikována pomocí
border-top
vlastnosti. Můžete také zahrnout border-bottom
, border-left
a/nebo
border-right
chcete-li více "spinnerů" (viz příklad níže).
Velikost nakladače je specifikována pomocí vlastností width
a height
.
Nakonec přidáme, animation
že se modrá věc bude věčně otáčet rychlostí animace 2 sekundy.
Poznámka: Měli byste také zahrnout předponu -webkit- pro prohlížeče, které nepodporují vlastnosti animace a transformace. Klikněte na příklad a uvidíte jak.
Přidejte další spinnery
Příklad
.loader {
border-top: 16px solid blue;
border-bottom: 16px solid blue;
}
Příklad
.loader {
border-top: 16px solid blue;
border-right:
16px solid green;
border-bottom: 16px solid red;
}
Příklad
.loader {
border-top: 16px solid blue;
border-right: 16px
solid green;
border-bottom: 16px solid red;
border-left:
16px solid pink;
}
Další příklad
Příklad, jak umístit nakladač doprostřed stránky a po dokončení načítání zobrazit „obsah stránky“: