Garth

Načítací ikona přez CSS

loader, loading ikona

Jak vytvořit načítací ikonu bez použití obrázku? Lze to přez CSS a jeho animace.

Pokud chceme aby načítací ikona byla kolečko, tak použijeme vlastnost border-radius. Rotovat lze vlastně cokoliv, klidně čtverec či čáru. Kódby byl například takovýto:
//CSS cast
.loader {
    width: 60px; 
    height: 60px;
    -webkit-animation: efekt_otaceni 1s infinite linear;
    animation: efekt_otaceni 1s infinite linear;
    border-radius: 50% 50% 50% 50%;
    border-bottom: 2px solid #000000;
}
@-webkit-keyframes efekt_otaceni {
    to {-webkit-transform: rotate(360deg)}
}
@keyframes efekt_otaceni {
    to {transform: rotate(360deg)}
}

//HTML cast (pouziti)




<< zpět




Nejnovější články