bootstrap barre de progression de ne pas l'animation

J'ai installé bootstrap pour mon Rails 4 application à l'aide de la ruby gem.

Je l'ai copié et collé le code pour une animation de la barre de progression directement à partir de bottes docs dans ma page:

<div class="progress progress-striped active">
   <div class="progress-bar"  role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
      <span class="sr-only">45% Complete</span>
   </div>
</div>

Mais la barre n'est pas l'animation. La seule chose que je peux penser est le fait que j'ai changé la barre de couleur, à la sass variables.

Pourquoi n'est-il pas l'animation?

Modifier

Ce que mon bar ressemble à:
bootstrap barre de progression de ne pas l'animation

Modifier

Voici le CSS appliqué lorsque je utiliser le active classe:
bootstrap barre de progression de ne pas l'animation

Comment avez-vous changer les couleurs?
juste changé le $brand-primary variable dans ma feuille de style.
Fut-il jamais de travail de la mise en œuvre (qui est, avant vous faites le changement de couleur)?
Êtes-vous à l'aide de Less stylesheets ou css stylesheets? J'espère que vous avez suivi toutes les instructions lors de l'installation de la gemme github.com/seyhunak/twitter-bootstrap-rails, j'ai simulé le scénario exact que par les instructions et il a travaillé comme champion.
L'animation de la barre de progression est appliquée par la css. Lorsque vous inspectez votre barre de progression de l'élément dans les outils de dev, voyez-vous .les progrès accomplis.active .barre de progression { -webkit-animation: progress-bar-bandes 2s linéaire infini; animation: progress-bar-bandes 2s linéaire infini; } styles?

OriginalL'auteur Deekor | 2014-05-15

  1. 8

    C'est juste que le blanc translucide bandes (rgba(255,255,255,.15)) ne s'affichent pas sur certaines couleurs.

    Prendre le navigateur Chrome de yellow. Si nous prenons cette couleur dans Photoshop, puis placez une bande blanche sur elle avec .15 opacité, il n'est pas visible. J'ai mis les grandes lignes sur ici de sorte que vous pouvez voir où la bande.

    bootstrap barre de progression de ne pas l'animation

    Donc pour certaines couleurs, vous devrez peut-être ajuster l'alpha de la bande de couleur. J'ai ajouté une classe de .progress-bar-primary à la .progress-bar, d'une manière similaire à la façon dont vous ajoutez .progress-bar-warning etc.

    <div class="progress progress-striped active">
  <div class="progress-bar progress-bar-primary"  role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
    <span class="sr-only">45% Complete</span>
  </div>
</div>

    Puis pour que .progress-bar-primary, il suffit de changer l'alpha de la bande à votre goût. Pour le Jaune de Chrome, j'ai utilisé .75 opacité.

    .progress-bar-primary {
  background-color: yellow;
}

.progress-striped .progress-bar-primary {
  background-image: linear-gradient(45deg, rgba(255, 255, 255, .75)   25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .75) 50%, rgba(255, 255, 255, .75) 75%, transparent 75%, transparent);
}

    Démo Ici

    J'ai seulement changé tho couleur sur l'une des barres de progression. Si j'essaie progress-bar-info par exemple sa ne fonctionne toujours pas. Et je peux voir les bandes blanches.. ils ont juste ne sont pas en mouvement.Ive a ajouté que mon bar ressemble à ma question.
    Quel navigateur utilisez-vous?
    Je suis en utilisant google chrome. L'animation de bar a l'air bien sur le bootstrap docs.
    Ainsi, lorsque vous réinitialisez l' $marque-primaire à ce qu'il était avant, il fonctionne à nouveau?
    non il ne marche pas, ça ne fonctionne jamais

    OriginalL'auteur davidpauljunior

  2. 2

    Remplacer class="bar" avec class="progress-bar".

    OriginalL'auteur Dilantha Maneth Perera

  3. 1

    Place les images clés css en haut de votre fichier css, pas imbriquée (si vous avez utilise sass) et de ne pas l'ajouter dans un media-query.

    Découvrez ce tutoriel par la voie, il n'est pas en utilisant bootstrap mais très sympa: sarahjustine.com/2013/03/24/animated-progress-bars-with-css3-2

    OriginalL'auteur Wim Mertens

  4. 0

    Avez-vous vraiment essayé de revenir vos modifications pour les couleurs? Si pas, il peut être la peine d'essayer pour voir si il est votre problème.

    Si c'est pas le cas, je vous suggère par défaut, il est de retour à stock et puis il suffit de l'isoler, de son propre chef et de voir comment il va. Il peut être un problème avec d'autres contenus dans le code html ou autre chose confliting donc, si vous devez le charger dans un document vierge avec le stock de paramètres.

    Je ne peux penser à rien d'autre pour le moment. J'espère que cela fonctionne.

    Ya j'ai essayé de faire le stock des trucs aussi bien et sa ne fonctionne pas.
    Avez-vous re télécharger bootstrap et de l'essayer?

    OriginalL'auteur Armageddon08