loading.scss

@import 'color_theme';
/* Example
<div class="loadingdiv">
	<span></span>
	<span></span>
	<span></span>
	<span></span>
	<span></span>
	<div></div>
</div>
*/

.loadingdiv{
	height: 30px;
	margin: 10px 5px;
	display: inline-block;
}
.loadingdiv span{
	display: inline-block;
	vertical-align: middle;
	width: 4px;
	background: $main_bg;
	border-radius: 3px;
	-webkit-animation: loading 0.8s infinite alternate;
	-moz-animation: loading 0.8s infinite alternate;
	box-shadow:1px 1px 1px $main_bg;
}
.loadingdiv div{
	height:30px;
	display:inline-block;
	vertical-align: middle;
}
.loadingdiv span:nth-of-type(2) {
	-webkit-animation-delay: 0.1s;
	-moz-animation-delay: 0.1s;
}

.loadingdiv span:nth-of-type(3) {
	-webkit-animation-delay: 0.2s;
	-moz-animation-delay: 0.2s;

}

.loadingdiv span:nth-of-type(4) {
	-webkit-animation-delay: 0.3s;
	-moz-animation-delay: 0.3s;
}

.loadingdiv span:nth-of-type(5) {
	-webkit-animation-delay: 0.4s;
	-moz-animation-delay: 0.4s;
}

@-webkit-keyframes loading {
						0% {
							height: 10px;
							-moz-transform: translateZ(0);
						}
						35% {
							height: 30px;
							-moz-transform: translateZ(-21px);
						}
						100% {
							height: 10px;
							-moz-transform: translateZ(0);
						}
					}

@-moz-keyframes loading {
						0% {
							height: 10px;
							-moz-transform: translateZ(0);
						}
						35% {
							height: 30px;
							-moz-transform: translateZ(-21px);
						}
						100% {
							height: 10px;
							-moz-transform: translateZ(0);
						}
					}