html css trikovi kako da stilizujete loader


Akcija traje do 01.08.2019 - Besplatni online kurs web dizajna

Nastavna jedinica: Kako da stilizujete LOADER


Nazad


Kako da izdizajnirate jednostavan LOADER


LOADER predstavlja jednostavnu animaciju koja rotira borduru kružnice (Div tag čiji je border-radius: 50%;) u trajanju od 2 sekunde za pun krug. LOADER najčešće ima funkciju da se vizuelno predstavi neki proces obrade skripte. Na primer, kad se posle skirpte koja ubacuje neki artikal U SQL bazu podataka, odlazi na stranicu gde je PHP kod koji procesuira INSERT-ovanje podatka, za to vreme se prikazuje loader kao naznaka posetiocu da je proces u roku posle čega naknadna skirpta vraća posetioca na početnu stranu.

LOADER u ovoj vežbi je u stvari div tag čiji radijus zaobljenja od 50% i stavri definiše kružnicu koja ima borduru odredjenih dimenzija i koja se uz pozivanje "keyframes" rotira za 360 stepeni. Kroz stilove unutar HEAD odeljka bordura se može dodatno stilizovati - debljina, boja kao i dimenzije LOADER-a (width: 120px; height: 120px;).

Head


<style>
.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>

Body


<div class="loader"></div>

Prikaz u Browser-u


NOVO - DOPUNITE ZNANJE - WEB PROGRAMIRANJE (PHP, SQL)

Posle pređenih svih nastavnih jedinica u okviru Besplatne online obuke za web dizajn, obuku možete nadograditi odnosno dopuniti svoje znanje tako što će naučiti i web programiranje - PHP, SQL - izrada dinamičkih sajtova, online prodavnica. Kurs prati napisana skripta, izvorni kodovi i nekoliko desetina video nastavnih jedinica gde polaznik hronološki uči pisanje koda u PHP-u, testiranje skripti, korišćenje i rad sa Local serverom.

Cena obuke