Un loader avec animation en pur CSS

Stephan GIULIANI

11/11/2022 -

Découvrez comment implémenter un loader animé en pur CSS !

Loader animé en pur CSS

Pour ce tuto, vous allez pouvoir créer un loader en pur CSS pour pouvoir l'intégrer par la suite dans vos pages web.

Code HTML

Le code HTML est tout ce qu'il y a de plus simple et se résume aux lignes suivantes

<div id="loader-ring-container">
    <div id="loader-ring-container">
        <div class="loader-ring-wrapper">
            <div class="loader-ring"></div>
            <div class="loader-ring"></div>
            <div class="loader-ring"></div>
        </div>
    </div>
</div>

Code CSS

Le CSS, un peu plus long se décompose en deux parties. La première partie va définir les trois anneaux qui seront imbriqués et animés ainsi que les conteneurs ; chaque anneau appellera l'animation qui lui est affectée. La seconde partie est consacrée aux animations qui seront lancées avec un décalage de quelques secondes l'une par rapport à l'autre pour créer cet effet visuel de rotation imbriquée.

Le CSS pour les anneaux

#loader-ring-container
{
    height: 250px;
    margin: 0 auto;
    position: relative;
    width: 250px;
}
.loader-ring-wrapper
{
    left: 125px;
    position: absolute;
    top: 125px;
}
.loader-ring
{
    border-left: 4px solid #1BC9F5;
    border-radius: 50%;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        -o-border-radius: 50%;
    border-top: 4px solid #1BC9F5;
    height: 100px;
    left: -21px;
    margin: -30px;
    position: absolute;
    top: -66.66px;
    width: 100px;
    animation: loader-ring-animate 4s linear infinite;
        -webkit-animation: loader-ring-animate 4s linear infinite;
}
.loader-ring:nth-child(2)
{
    border-left: 4px solid #37EB26;
    border-top: 4px solid #37EB26;
    left: -63px;
    position: absolute;
    top: 4px;
    animation: loader-ring-animate-2 4s linear infinite;
        -webkit-animation: loader-ring-animate-2 4s linear infinite;
    animation-delay: -1s;
}
.loader-ring:nth-child(3)
{
    border-left: 4px solid #E41DB9;
    border-top: 4px solid #E41DB9;
    left: 22px;
    position: absolute;
    top: 4px;
    animation: loader-ring-animate-3 4s linear infinite;
        -webkit-animation: loader-ring-animate-3 4s linear infinite;
    animation-delay: -3s;
}

Le CSS pour les animations

@keyframes loader-ring-animate
{
    0%
    {
        transform: rotate(0deg);
            -webkit-transform: rotate(0deg);
            -moz-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            -o-transform: rotate(0deg);
    }
    100%
    {
        transform: rotate(360deg);
            -webkit-transform: rotate(360deg);
            -moz-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            -o-transform: rotate(360deg);
    }
}
@keyframes loader-ring-animate-2
{
    0%
    {
        transform: rotate(360deg);
            -webkit-transform: rotate(360deg);
            -moz-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            -o-transform: rotate(360deg);
    }
    100%
    {
        transform: rotate(0deg);
            -webkit-transform: rotate(0deg);
            -moz-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            -o-transform: rotate(0deg);
    }
}
@keyframes loader-ring-animate-3
{
    0%
    {
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
    }
    100%
    {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
    }
}

Rendu

Voici le rendu final intégré dans une div

Conclusion

Ce tuto est une base que vous pouvez personnaliser à votre guise en modifiant les couleurs, la vitesse de rotation en modifiant la durée -webkit-animation: loader-ring-animate 4s linear infinite;) où 4s indique qu'il faut jouer l'animation complète en 4 secondes.

Bref, laissez libre cours à votre esprit créatif !