Progressive CSS3 animation

Question

I need to make progressive bar similar to this: https://dribbble.com/shots/1664914-Onboarding-Progress-Steps?list=searches&tag=onboarding&offset=31

I have tried till this point: Codepen Link

CSS

body{
            background-color: #34495e;
        }
        .mail{
            border: 1px solid #d35400;
            border-radius: 50%;

            border-width: 50%;
            float: left;
            background-color: #d35400;
            color: white;
        }
        .navbar-inverse .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
    background-color: #16a085;


}
.navbar-inverse{
    background-color: #1abc9c;


}.icon-bar {
    width: 90px;
    background-color: #555;
}

.icon-bar a {
    display: block;
    text-align: center;
    padding: 16px;
    transition: all 0.3s ease;
    color: white;
    font-size: 36px;
    background-color:  #34495e;
}
.same{
    float: left;
    font-size: 32px;

}
.icon-bar a:hover {
   color: #1abc9c;
}

.active {
   color: #1abc9c !important;
}
.header{

    color: white;
    background-color: #34495e;
    margin-left: 2%;
}
.fs1 {
  font-size: 32px;
}
.container{
    width: 100%;
}
.progressionbar li{
    list-style-type: none;
    width: 33.33%;
    float: left;
    position: relative;
}
.progressionbar li >span{

    width: 20%;
    height:30%;

    border:2px solid transparent;
    display: block;
    text-align: center;
    margin: 0 auto 10px auto;
    border-radius: 50%;
    padding: 5%;
    background-color: white;
    box-shadow: rgba(0, 0, 0, 0.792157) 3px 3px 3px 0;

}
.progressionbar li:after{
    content: '';
    position: absolute;
    width: 100%;
    height: 6px;
    background-color: #9b59b6;
    top: 35%;
    left: -50%;
    z-index: -1;


    }


.first{
    animation-name: example;
animation-duration: 10s;
 animation-iteration-count: infinite;
 animation-direction: alternate;
  animation-delay:2s;

 }

.first{
    animation-duration: 2s;
  animation-name: example;
   animation-iteration-count: 1;
}
.second{
    animation-name: example;
animation-duration: 10s;
 animation-iteration-count: infinite;
 animation-delay: 6s;

}
.second{
    animation-duration: 2s;
  animation-name: example;
   animation-iteration-count: 1;
    }
.third{
    animation-name: example;
animation-duration: 10s;
 animation-iteration-count: infinite;
 animation-delay: 8s;
}
.third{
    animation-duration: 2s;
  animation-name: example;
   animation-iteration-count: 1;
}

@-webkit-keyframes example {
    from {background-color: white;}
    to {background-color: #9b59b6;}
     0% {
    transform: scale(0.1);
    opacity: 0;
  }
  60% {
    transform: scale(1.2);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}

.progressionbar li:first-child:after{
    content: none;
    left: -50%;

}

HTML

<html><body>


<nav class="navbar navbar-inverse">
  <div class="container-fluid">
   <a style="background-color: #34495e" class="navbar-brand active" href="#"><span class="icon-brand same"></span></a>
        <ul class="nav navbar-nav navbar-right">
        <li class="dropdown active">
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">Rupam Verma<b class="caret"></b></a>
               <ul class="dropdown-menu">
                <li><a href="new.html" target="_blank"><h1 class="mail">R</h1><h5>Rupam varma</h5><br><h5 style="float: right;"><a href="https://plus.google.com/u/0/105904544623478465796"> mahi.roops@gmail.com</a></h5></li>
             </ul>
        </div>
    </nav></a></li></ul></li></ul></div></nav>
     <div class="row">
     <div class="col-md-12">
    <h3 class="header">Menu</h3></div>
    <div class="col-md-1">
    <div class="icon-bar">
       <a class="active" href="#"><span class="icon-circle"></span></a> 
      <a href="#"><span class="icon-toggle-off"></span></i></a> 
      <a href="#"><span class="icon-checklist"></span></a></div></div>
 <div class="col-md-11">
        <div class="progressionbar">
            <ul class="">
            <div class="fs1">
            <li><span class="icon-gift first"></span><h3 style="text-align: center">gift</h3></li>
            <li><span class="icon-truck2 second"> </span><h3 style="text-align: center;"> car</h3></li>
            <li> <span class="icon-profile-male third"></span><h3 style="text-align: center;"> user</h3></li>
            </div>
            </ul>
            </div></div></div></div>
</body>
</html>

I really don't know how to achieve such a thing exactly since This has to be done only through css3 and no JS. This timer and zoom-in zoom-out is my issue. Also, its not repeating.

Any help would be greatly appreciated, thanks.

Do you want the little bar linking the "buttons" to get filled too and buttons to activate just when the filling reach them too ? — Alburkerk, Jul 26 '17 at 06:37
Ok I am working on the fiddle, the solution result in one word : more keyframes — Alburkerk, Jul 26 '17 at 07:04

score 0 · Answer 1 · answered Jul 26 '17 at 07:23

Ok so the answer is actually simple for the delays.

FOR THE DELAYS:

You can see a fiddle here showing the solution.

CSS3 got no delay between animation loops, only for the first one. But a quick search on CSS trick show you how to do that.

The idea is to create more keyframes to make the delay.

@-webkit-keyframes example3 {
 0% {
transform: scale(1);
opacity: 1;
background-color: white;
}
59% {
 transform: scale(1);
opacity: 1;
background-color: white;
}
60% {
transform: scale(0.1);
opacity: 0;
background-color: white;
}
72% {
transform: scale(1.2);
opacity: 1;
}
80% {
transform: scale(1);
background-color: #9b59b6;
}
100% {
transform: scale(1);
background-color: #9b59b6;
}

}

Here is the code for an animation during 10 seconds. You can notice that nothing happens for the 6 first seconds because we want to delay it of 6 seconds each loop (third button for your case).

After that, we do the animation during the time we wnat, here 2secondes, ie 20%, and we let the final state untill 100%.

The 59% - 60% weird stuff happends because you want an abrupt change at the start of the animation. It's not always necessary.

Consequently, your problem is only a basic math problem afterall, just calculate when do you have to wait for each animation etc.. I did it for you for the 3 buttons so you can see the result.

FOR THE PROGRESSIVE BAR :

The strategy should be the same than before. Just create another bar with a background color #9b59b6, and make the width change with the percentage, soemtimes waiting 2sec at a certain width for a "button" animation going on before continuing its way, and the work is done!

In your case, you decided to make the progressive bar with after, and not an absolute one, so it is in two parts etc etc..

What I suggest you is to just create a absolute positionned one with the right background color which will recover the ":after" ones, makes it normal width to 0%, and make it grow with animation just like I explained.

Why didn't I do it ? Well you have the strategy now and I am too lazy to position it perfectly. And it's your work at the end.. It will always be better for you if you practice on the progress bar rather than copy paste my code.

Thanks but this has one issue.The background color of circles should be in sync with background. And it should keep running in loop. Just like this https://dribbble.com/shots/1664914-Onboarding-Progress-Steps?list=searches&tag=onboarding&offset=31 — Gagan Deep, Jul 26 '17 at 09:03
I think you misunderstood the concept of Stack Overflow, we are not here to work for you. "Sync background color with the background" is only changing one CSS property, and it's very simple. You didn't even precise this in your question. We help you, but you have to understand that coding require work and not copy paste only — Alburkerk, Jul 27 '17 at 02:30

score 0 · Answer 2 · answered Jul 26 '17 at 07:51

i would go on 2 animation.

one to draw the progress line (as a background)
a second for the poping circle (flex children)

/* keyframes for animation */
@keyframes run {
  to {
    background-size:10000% 5px
  }
}
@keyframes popup {
  65% {
    transform:scale(1.4)
  }
  60%, 100% {
    background:purple;
    transform:scale(1)
  }
}
/* call and delay animations */
.progress span {
  animation:popup 0.5s forwards;
}
.progress span:nth-child(2){
  animation-delay:1.25s;
}
.progress span:nth-child(3){
  animation-delay:2.75s;
}
.progress {
  animation:run 3s linear forwards;
}

/* styling */
.progress {
  background:linear-gradient(to right, purple 1%, white 1%) rgb(52, 73, 94) no-repeat left center; /* to animate via keyframes */
  display:flex;
  justify-content:space-between;
  margin:1em 2em;
  background-size: 100% 3px;
}
.progress span {
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:2px 2px 5px black;
  width:80px;
  height:80px;
 background:white;
  border-radius:100%;
  color:white;
  font-size:30px;
}
body {background:rgb(52, 73, 94)}

<p class="progress">
  <span>1</span>
  <span>2</span>
  <span>3</span>  
</p>

pen to play with

Thanks but this has one issue.The background color of circles should be in sync with background. Just like this Just like this https://dribbble.com/shots/1664914-Onboarding-Progress-Steps?list=searches&tag=onboarding&offset=31 — Gagan Deep, Jul 26 '17 at 09:01
@GaganDeep synchro is your job here ,reset: the timing line(%) , duration, function(ease, linear, ..) or delay to your needs. It is a quick example how to make code shorter and easier to update . ;) — G-Cyrillus, Jul 26 '17 at 09:09

Progressive CSS3 animation

2 Answers2