Bootstrap Progress bar with a heartbeat

I still haven't figured out how to do what I really want, but on trying to find it, I found what I think is an interesting animation for progress bars.

Bootstrap Progress bar with a heartbeat uses keyframe animation to create a "pulsating" / "heartbeat" effect on a bootstrap progress bar. Here is the CSS I used:

.progress-bar{
 background:  rgb(255, 215, 109);
-webkit-animation-name: pulse; /* Chrome, Safari, Opera */
-webkit-animation-duration: 2s; /* Chrome, Safari, Opera */
-webkit-animation-iteration-count: infinite;
animation-name: pulse;
animation-duration: 2s;
animation-iteration-count: infinite;
}

//create the animation
@-webkit-keyframes pulse { // for chrome, safari, opera
0%   {background: rgb(255, 215, 109);}
25%   {background: rgb(255, 215, 109);}
50%   {background: rgb(255, 215, 109);}
75%  {background: rgb(255, 231, 167);}
85%{background: rgb(255, 215, 109);}
100% {background: rgb(255, 215, 109);}
}

@keyframes pulse {
0%   {background: rgb(255, 215, 109);}
25%   {background: rgb(255, 215, 109);}
50%   {background: rgb(255, 215, 109);}
75%  {background: rgb(255, 231, 167);}
100% {background: rgb(255, 215, 109);}
}

I will call this animation when I make an ajax call to check for status. My users will know that I'm still working for them. It should negate the need for a spinner.