Progress Animations with YUI transitions

css

.progress-indicator {
	position: absolute;
	height: 40px;
	overflow: hidden;
}

.progress-bubble {
	background-color: #efefef;
	width: 20px;
	height: 20px;
	border-radius: 5em;
	display: inline-block;
	margin-right: 15px;
	position: relative;
	top: 20px;
}

html

<figure>
	<div class="progress-indicator">
		<div class="progress-bubble"></div>
		<div class="progress-bubble"></div>
		<div class="progress-bubble"></div>
		<div class="progress-bubble"></div>
		<div class="progress-bubble"></div>
	</div>
</figure>

js

YUI().use('node-base', 'event','event-custom','transition', function(Y) {
	'use strict';
	
	var teal = '#485768',
		grey = '#efefef',
		duration = 0.25,
		container = Y.one('.progress-indicator'),
		steps = [
			{ 
				selector: 'div:nth-child(3)', 
				transition: { backgroundColor: teal, duration: duration }
			},
			{ 
				selector: 'div:nth-child(3)', 
				transition: { backgroundColor: grey, duration: duration }
			},
			{ 
				selector: 'div:nth-child(2), div:nth-child(4)', 
				transition: { backgroundColor: teal, duration: duration }
			},
			{ 
				selector: 'div:nth-child(2), div:nth-child(4)', 
				transition: { backgroundColor: grey, duration: duration }
			},
			{ 
				selector: 'div:nth-child(1), div:nth-child(5)', 
				transition: { backgroundColor: teal, duration: duration }
			},
			{ 
				selector: 'div:nth-child(1), div:nth-child(5)', 
				transition: { backgroundColor: grey, duration: duration }
			},
			{ 
				selector: 'div:nth-child(2), div:nth-child(4)', 
				transition: { backgroundColor: teal, duration: duration }
			},
			{ 
				selector: 'div:nth-child(2), div:nth-child(4)', 
				transition: { backgroundColor: grey, duration: duration }
			}
		],
		finishSteps = [
			{
				selector: 'div:nth-child(3)',
				transition: { top: '-20px', delay: 0, duration: duration }
			},
			{
				
			}
		];
		
		
		function queueTransitions(steps, index) {			
			if ( steps[index] ) {
				container.all(steps[index].selector).transition(
					steps[index].transition,
					function() {
						if (steps[index + 1]) {							
							queueTransitions(steps, index + 1);	
						}
						else {
							Y.Global.fire("loader:animComplete");	
						}
					}
				);
			}
		}
		
		function queueAnimationsAsync(transitions) {
			for ( var i = 0; i < transitions.length; i++ ) {
				container.all(transitions[i].selector).transition(
					transitions[i].transition
				);
			}
		}
		
		Y.Global.on("loader:animComplete",function(){			
			window.setTimeout(function() {
				queueTransitions(steps,0);	
			},3);
		});
		
		queueTransitions(steps,0);
});