i have progress bar several 'checkpoints'.
i want checkpoints filled linearly progress bar reaches reach point in way appears natural. progress bar fills left right, should fill checkpoint , stop until receives further user interaction.
i used jquery fill each checkpoint when progress bar reached applying css class when progress fill animation over. looked amateur though. want make same fill animation applied both progress bar , checkpoint stops at.
how can using pure css?
<div class="progress"> <div class="progress-bar"> <div class="progress-indicator item-0"></div> <div class="progress-indicator item-1"></div> <div class="progress-indicator item-2"></div> <span class="progress-bar-fill-area" style="width: 22.5%;"></span> </div> </div>
if consider base64 encoded images in css pure css, can use them mask, overlaying them on progress-bar.
var n = 0; setinterval(function() { var bar = document.queryselector(".progress"); bar.classlist.remove("step" + ((n + 4) % 5)); bar.classlist.add("step" + n); n = (n + 1) % 5; }, 2000);
.progress-bar { width: 500px; height: 32px; background-color: gray; position: relative; } .progress-indicator { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-image: url('data:image/png;base64,ivborw0kggoaaaansuheugaaah0aaaagcayaaaa/khcmaaabfuleqvro3u3ypw6dmbiayx8vmyleqb4dopuyvaismffteowexgluql1gsinfag6a2jhcsr36k6fsved9vjz51ycnutd1vlgqn2wb0uf0eb1eb9fbdbadrafr8qtergmtvthmeekqeiiyyw5aay8i7+v4dzuglmu2qqr2zrnzz8+ttc00tcdt2zimpzejl8uy+yq4uko5585vve1fhelpqveur977u0vwdl33wo4bajdixy+l3p+ntfbjod5csrzt2xofbalylqw11jy/rev7/n5d11uijydgqkzpon4x3lrbzpm8xhh5vsd1vouo3w7n8zx/gobh+cn0py7l0syyodovfa93oopoidqidqkd6ca6ii4/9az+blvj/motkwaaaabjru5erkjggg=='); float: left; } .progress-bar-fill-area { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: #63bc62; width: 0%; } .step1 .progress-bar-fill-area { width: 25%; transition: width 1s; } .step2 .progress-bar-fill-area { width: 50%; transition: width 1s; } .step3 .progress-bar-fill-area { width: 75%; transition: width 1s; } .step4 .progress-bar-fill-area { width: 100%; transition: width 1s; }
<div class="progress"> <div class="progress-bar"> <div class="progress-bar-fill-area"></div> <div class="progress-indicator"></div> </div> </div>
Comments
Post a Comment