Hey! Tu as de la chance 🙂 on parlera de programmation facile
Aujourd’hui, tu vas apprendre à réaliser du presqu’impossible 😉. Bref nous allons dans cette astuce, vous montrer comment réaliser barre de chargement en HTML5 & CSS3.
ça doit être compliqué 🙄… j’ai peur des longs bouts de code😨
😹😹😹 non pas du tout c’est en une dizaine de ligne que tu feras ces merveilles.
Allons soldats 🤖, créons à présent notre code html.
<html>
<head>
<title> Titre de votre page </title>
<style>
#container{
width: 75px; /*fixer la largeur*/
height: 75px; /*fixer la hauteur*/
border: 20px solid grey;
border-bottom: 20px solid red; /* indiquer la position, la couleur de rotation*/
border-radius: 50%; /*arrondir les bordures pour avoir un effet circulaire*/
animation:spin 2s linear infinite/*animation: spin 3s rotate(360°) infinite*/;
}
@keyframes spin { /*parametre de la rotation*/
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
</body> </html>
C’est terminé 😇.
Pour tester le code rendez vous sur Mozilla Thimble, Copier le code ci-dessus dans l’éditeur de Thimble. Amuses-toi bien en changeant les valeurs 🤩
Merci de t’abonner 😍 et de visiter permanement, surtout un like 👍
A bientôt !
Intelli Digital 
Laisser un commentaire