.material-bar-loader{
	width: @DEFAULT_MATERIAL_BAR_LOADER_WIDTH;
	height: @DEFAULT_MATERIAL_BAR_LOADER_HEIGHT;
	background-color: @MATERIAL_BAR_LOADER_COLOR;
	position: relative;

	&.disable{
		background-color: @MATERIAL_BAR_LOADER_COLOR_DISBLE;
	}

	&.stop {

	}

	&.running {

	}

	&.paused {

	}

	>.point{
		height: 100%;
		width: @MATERIAL_BAR_LOADER_POINT_WIDTH;
		background-color: @MATERIAL_BAR_LOADER_POINT_COLOR;
		position: absolute;
		//.phlox-transition();
		left: -@MATERIAL_BAR_LOADER_POINT_WIDTH;

		@-webkit-keyframes moving {
		    0%   {left: 0;}
		    100% {left: 100%;}
		}

		&.disable{
			display: none;
		}

		&.running {

		}

		&:first-child {
			-webkit-transition: all 5000ms cubic-bezier(1.000, 0, 0.000, 1); /* older webkit */
			-webkit-transition: all 5000ms cubic-bezier(1.000, -0.065, 0.000, 1.060);
			   -moz-transition: all 5000ms cubic-bezier(1.000, -0.065, 0.000, 1.060);
			     -o-transition: all 5000ms cubic-bezier(1.000, -0.065, 0.000, 1.060);
			        transition: all 5000ms cubic-bezier(1.000, -0.065, 0.000, 1.060); /* custom */

			-webkit-transition-timing-function: cubic-bezier(1.000, 0, 0.000, 1); /* older webkit */
			-webkit-transition-timing-function: cubic-bezier(1.000, -0.065, 0.000, 1.060);
			   -moz-transition-timing-function: cubic-bezier(1.000, -0.065, 0.000, 1.060);
			     -o-transition-timing-function: cubic-bezier(1.000, -0.065, 0.000, 1.060);
			        transition-timing-function: cubic-bezier(1.000, -0.065, 0.000, 1.060); /* custom */

				&.running {
						-webkit-animation: moving 5000ms infinite;
						animation: moving 5000ms infinite;
				}
		}

		&:nth-child(2) {
			-webkit-transition: all 2000ms cubic-bezier(1.000, 0, 0.000, 1); /* older webkit */
			-webkit-transition: all 2000ms cubic-bezier(1.000, -0.065, 0.000, 1.060);
			 -moz-transition: all 2000ms cubic-bezier(1.000, -0.065, 0.000, 1.060);
				 -o-transition: all 2000ms cubic-bezier(1.000, -0.065, 0.000, 1.060);
						transition: all 2000ms cubic-bezier(1.000, -0.065, 0.000, 1.060); /* custom */

			-webkit-transition-timing-function: cubic-bezier(1.000, 0, 0.000, 1); /* older webkit */
			-webkit-transition-timing-function: cubic-bezier(1.000, -0.065, 0.000, 1.060);
			 -moz-transition-timing-function: cubic-bezier(1.000, -0.065, 0.000, 1.060);
				 -o-transition-timing-function: cubic-bezier(1.000, -0.065, 0.000, 1.060);
						transition-timing-function: cubic-bezier(1.000, -0.065, 0.000, 1.060); /* custom */

				&.running {
						-webkit-animation: moving 2000ms infinite;
						animation: moving 2000ms infinite;
				}
		}

		&:last-child {
			-webkit-transition: all 1000ms cubic-bezier(1.000, 0, 0.000, 1); /* older webkit */
			-webkit-transition: all 1000ms cubic-bezier(1.000, -0.065, 0.000, 1.060);
			   -moz-transition: all 1000ms cubic-bezier(1.000, -0.065, 0.000, 1.060);
			     -o-transition: all 1000ms cubic-bezier(1.000, -0.065, 0.000, 1.060);
			        transition: all 1000ms cubic-bezier(1.000, -0.065, 0.000, 1.060); /* custom */

			-webkit-transition-timing-function: cubic-bezier(1.000, 0, 0.000, 1); /* older webkit */
			-webkit-transition-timing-function: cubic-bezier(1.000, -0.065, 0.000, 1.060);
			   -moz-transition-timing-function: cubic-bezier(1.000, -0.065, 0.000, 1.060);
			     -o-transition-timing-function: cubic-bezier(1.000, -0.065, 0.000, 1.060);
			        transition-timing-function: cubic-bezier(1.000, -0.065, 0.000, 1.060); /* custom */

					&.running {
							-webkit-animation: moving 1000ms infinite;
							animation: moving 1000ms infinite;
					}
		}
	}
}