remplir la couleur de fond seulement 50% de sa largeur totale

Est-il possible en CSS pour remplir la couleur de fond que 50% de sa largeur totale?

Je suis en train de faire une barre de progression où j'ai besoin de remplir l'arrière-plan de couleur en fonction de la "%" de progrès.

Veuillez fournir des pointeurs.

source d'informationauteur gaurav jain

  1. 27

    Il y a plusieurs manières d'y parvenir.

    Pseudo élément approche:

    <div class="progress"></div>

    EXEMPLE

    .progress {
    width:200px;
    height:50px;
    border:1px solid black;
    position:relative;
}
.progress:after {
    content:'\A';
    position:absolute;
    background:black;
    top:0; bottom:0;
    left:0; 
    width:50%; /* Specify the width.. */
}

    Linéaire gradients approche:

    L'avantage de cette approche est que vous pouvez spécifier plusieurs de différentes couleurs..

    EXEMPLE

    .progress {
    width:200px;
    height:50px;
    border:1px solid black;
    background: -webkit-linear-gradient(left, black 50%, white 50%);
    background: -moz-linear-gradient(left, black 50%, white 50%);
    background: -ms-linear-gradient(left, black 50%, white 50%);
    background: linear-gradient(left, black 50%, white 50%);
}

    Animation sans JS/JQUERY

    Ou l'autre de ces approches peut être animée par pur CSS..

    EXEMPLE

    .progress:after {
    /* other styling .. */
    width:50%; /* End width.. */
    -webkit-animation: filler 2s ease-in-out;
    -moz-animation: filler 2s ease-in-out;
    animation: filler 2s ease-in-out;
}

@-webkit-keyframes filler {
    0% {
        width:0;
    }
}

    Démarche de Transition

    EXEMPLE

    .progress:after {
    /* other styling.. */
    width:0;
    transition:all 2s;
    -webkit-transition:all 2s;
}
.progress:hover:after {
    width:50%;
}
  2. 4

    Oui, en utilisant des gradients de' arrête, c'est possible même avec un div;

    HTML

    <div></div>

    CSS

    div {

  width:400px;
  height:400px;


  background: -webkit-linear-gradient(left, #00ff00 50%, #ff0000 50%);
  background: -moz-linear-gradient(left, #00ff00 50%, #ff0000 50%);
  background: -o-linear-gradient(left, #00ff00 50%, #ff0000 50%);
  background: -ms-linear-gradient(left, #00ff00 50%, #ff0000 50%);
  background: linear-gradient(left, #00ff00 50%, #ff0000 50%);
}
  3. 2

    J'ai fait une progressbar animation à l'aide de Josh C réponse: http://jsfiddle.net/mjEDY/1/

    HTML:

    <div class="prog">
    <div id="filler" class="filler"></div>
</div>

    CSS:

    .prog {
    width:200px;
    height:50px;
    border:1px solid black;
}
.filler {
    width:0%;
    height:50px;
    background-color:black;
}

    JS:

    var stepSize = 50;
setTimeout((function() {
    var filler = document.getElementById("filler"),
        percentage = 0;
    return function progress() {
        filler.style.width = percentage + "%";
        percentage +=1;
        if (percentage <= 100) {
            setTimeout(progress, stepSize);
        }
    }

}()), stepSize);

    Il utilise un peu avancé astuces javascript (fermetures et setTimeouts pour l'animation), mais vous obtenez l'idée.. Avec un peu tourner, vous pouvez l'utiliser pour créer une barre de progression basé sur ce que vous voulez et pas besoin de js plugins 🙂

  4. 1

    Vous pouvez utiliser un absolu div avec 100% de la hauteur et de modifier la largeur à l'aide de javascript.

    Il semble assez cool:
    Voici la jsFiddle