Mettre une barre de progression dans son parent
fructueux97
Messages postés
8
Statut
Membre
-
fructueux97 Messages postés 8 Statut Membre -
fructueux97 Messages postés 8 Statut Membre -
salut à tous j'arrive pas à mettre la bande verte ci dessous dans la bande noir. comment proccédé pour le faire svp. voici le code
voici mon rendu
voici le code html aussi
merci de m'aider !
<style type="text/css">
.progress {
height: 20px;
position: relative;
background-color: #555;
border-radius: 25px;
padding: 10px;
box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);
}
.progress > span{
display: block;
height: 20px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background-color: rgb(43,194,83);
background-image: linear-gradient(
center bottom,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
);
box-shadow:
inset 0 2px 9px rgba(255,255,255,0.3),
inset 0 -2px 6px rgba(0,0,0,0.4);
overflow: hidden;
position: relative;
}
.progress > span::after {
content:"";
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background-image: linear-gradient(
-45deg,
rgba(255, 255, 255, .2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, .2) 50%,
rgba(255, 255, 255, .2) 75%,
transparent 75%,
transparent
);
z-index: 1;
background-size: 50px 50px;
animation: move 2s linear infinite;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
overflow: hidden;
}
@keyframes move {
0% {
background-position: 0 0;
}
100% {
background-position: 50px 50px;
}
}
.progress > span::after, .bar > span > span {
animation: move 2s linear infinite;
}
voici mon rendu
voici le code html aussi
<div class="progress bar">
<span style="width: 80%"><span></span></span>
</div>
merci de m'aider !
A voir également:
- Mettre une barre de progression dans son parent
- Windows 11 barre des taches a gauche - Guide
- Barre de défilement - Guide
- Une barre whatsapp - Guide
- Barre des taches - Guide
- Barre clavier - Forum Excel
4 réponses
très bien cest ce que je desire avoir ça
et non ça
ainsi j'aimerais savoir quoi ajouter dans le css pour obtenir la réponse present sur l'image 1. merci
et non ça
ainsi j'aimerais savoir quoi ajouter dans le css pour obtenir la réponse present sur l'image 1. merci
