J'utilise materialize css. Pouvez-vous me dire comment changer la couleur de le Preloader linéaire?
<div class="progress"> <div class="indeterminate"></div> </div>
Je veux changer la couleur en bleu.
4 Réponses :
Essayez ceci, je pense que cela vous est utile.
html
/* Progress Bar */ .progress { position: relative; height: 4px; display: block; width: 100%; background-color: #acece6; border-radius: 2px; background-clip: padding-box; margin: 0.5rem 0 1rem 0; overflow: hidden; } .progress .indeterminate { background-color: red; } .progress .indeterminate:before { content: ''; position: absolute; background-color: inherit; top: 0; left: 0; bottom: 0; will-change: left, right; -webkit-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; } .progress .indeterminate:after { content: ''; position: absolute; background-color: inherit; top: 0; left: 0; bottom: 0; will-change: left, right; -webkit-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; -webkit-animation-delay: 1.15s; animation-delay: 1.15s; } @-webkit-keyframes indeterminate { 0% { left: -35%; right: 100%; } 60% { left: 100%; right: -90%; } 100% { left: 100%; right: -90%; } } @keyframes indeterminate { 0% { left: -35%; right: 100%; } 60% { left: 100%; right: -90%; } 100% { left: 100%; right: -90%; } } @-webkit-keyframes indeterminate-short { 0% { left: -200%; right: 100%; } 60% { left: 107%; right: -8%; } 100% { left: 107%; right: -8%; } } @keyframes indeterminate-short { 0% { left: -200%; right: 100%; } 60% { left: 107%; right: -8%; } 100% { left: 107%; right: -8%; } }
css p >
<div class="progress"> <div class="indeterminate"></div> </div>
Solution 1:
<div class="progress blue"> <div class="indeterminate yellow"></div> </div>
Ajoutez background-color
aux deux classes progress
et indéterminé
.progress{ background-color: blue; } .indeterminate{ background-color: yellow; }
Solution 2:
Utilisez simplement des classes de couleurs de matérialisation.
<div class="progress"> <div class="indeterminate"></div> </div>
J'ai jeté un œil dans les fichiers sass pour le framework et vous devez en fait cibler:
.progress { background-color: darkblue; } .progress .indeterminate { background-color: steelblue; }
.progress{ margin-top:50%; background-color:gray; } .progress .indeterminate { background-color: orange; } You just need to change these two css only.
vous pouvez suivre ce codepen.io/holdencreative/pen/pvxGxy?editors=1100
Salut @kalidasrajeev si cela vous aide, vous pouvez marquer comme accepté