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;
    }
}


Lascia un commento