Come possiamo creare una semplice animazione di caricamento o preloader usando solo CSS?
Ci sono molti tipi di preloader, ci sono cubi, cerchi, barra di avanzamento , ecc. Oggigiorno molti usano il loro logo come loader.
Molti usano il loading anche nel caricamento del blog ma è una prassi che non consiglio.
Vediamo come creare una semplice schermata di caricamento usando HTML e CSS . Se vuoi metterlo sul tuo blog come preloader , devi usare JavaScript .
Questa è solo un’interfaccia utente, e in questa schermata di caricamento ci sono 4 cerchi che si muovono in ordine infinito.
Esempio
Pagina html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Loading Screen | Webdevtrick.com</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="loader">
<div class="dots"></div>
<div class="dots"></div>
<div class="dots"></div>
<div class="dots"></div>
<div class="dots"></div>
</div>
</body>
</html>CSS
/** code by webdevtrick ( https://webdevtrick.com ) **/
body {
background-color: whitesmoke;
}
.loader {
position: absolute;
top: 50%;
left: 50%;
}
.loader .dots {
position: absolute;
padding: 10px;
border-radius: 50%;
background: #f05855;
-webkit-animation: myani 1s ease-in-out 0s infinite;
animation: myani 1s ease-in-out 0s infinite;
}
.loader .dots:nth-child(1) {
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
.loader .dots:nth-child(2) {
-webkit-animation-delay: 0.15s;
animation-delay: 0.15s;
}
.loader .dots:nth-child(3) {
-webkit-animation-delay: 0.30s;
animation-delay: 0.30s;
}
.loader .dots:nth-child(4) {
-webkit-animation-delay: 0.45s;
animation-delay: 0.45s;
}
@keyframes myani {
0% {
-webkit-transform: translateX(-100px);
transform: translateX(-100px);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
-webkit-transform: translateX(100px);
transform: translateX(100px);
opacity: 0;
}
}