Ninja Froms multi step progres bar animations

user_18351959 0
Viewed 31

The site https://mobisolar.nl/offerte/ contains a multi-step form. The progress bar now changes color. We would like an animation in this from left to right. That it jumps instead of filling it up.

I have now used the following CSS:

    .nf-progress {
      position: absolute;
  -webkit-animation: linear infinite alternate;
  -webkit-animation-name: run;
  -webkit-animation-duration: 5s;
}
@-webkit-keyframes run {
  0% {
    left: 0;
  }
  50% {
    right: 0;
  }
  100% {
    left: 0;
    }
}
ninja css
1 Answers

If im reading this right you would want something like this

<div class='progress' data-step=4></div>

<style>
    div {
        position: relative;
        width: 100%;
        height: 0.25rem;
        background: #ccc;
        overflow: hidden;
    }

    div:after {
        content: '';
        position: absolute;
        inset: 0;
        background: #2f8; /* Random Color */
        transition: transform 150ms;
    }

    div[data-step=0]:after { transform: scaleX(0); }
    div[data-step=1]:after { transform: scaleX(0.2); }
    div[data-step=2]:after { transform: scaleX(0.4); }
    div[data-step=3]:after { transform: scaleX(0.6); }
    div[data-step=4]:after { transform: scaleX(0.8); }
    div[data-step=5]:after { transform: scaleX(1); }
</style>

And on each of the steps of the form the user completes, update the data-step using javascript which is pretty simple

user_144742440
Related