com.phloxui/styles/theme/material/component/MaterialIconLoader.less

PhloxUI Ng2+ Framework

// Override animation keyframes
@keyframes material-ball-pulse-rise-odd {
	0% {
		-webkit-transform: scale(.4);
		transform: scale(.4);
	}

	25% {
		-webkit-transform: translateY(250%);
		transform: translateY(250%);
	}

	50% {
		-webkit-transform: scale(1.1);
		transform: scale(1.1);
	}

	75% {
		-webkit-transform: translateY(-250%);
		transform: translateY(-250%);
	}

	100% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
		-webkit-transform: scale(.75);
		transform: scale(.75);
	}
}
@keyframes material-ball-pulse-rise-even {
	0% {
		-webkit-transform: scale(1.1);
		transform: scale(1.1);
	}

	25% {
		-webkit-transform: translateY(-250%);
		transform: translateY(-250%);
	}

	50% {
		-webkit-transform: scale(.4);
		transform: scale(.4);
	}

	75% {
		-webkit-transform: translateY(250%);
		transform: translateY(250%);
	}

	100% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
		-webkit-transform: scale(1);
		transform: scale(1);
	}
}

@keyframes material-ball-pulse-sync {
    33% {
        -webkit-transform: translateY(75%);
        transform: translateY(75%)
    }

    66% {
        -webkit-transform: translateY(-75%);
        transform: translateY(-75%)
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

.material-icon-loader {
	.phlox-transition();

	position: relative;
	
	width: @DEFAULT_MATERIAL_ICON_LOADER_SIZE;
	height: @DEFAULT_MATERIAL_ICON_LOADER_SIZE;
	opacity: 0;

	.loader {
		width: 100%;
		height: 100%;

		> div {
			width: 100%;
			height: 100%;
			transform: none;
			position: static;

			> div {
				// Loader node
				margin: 0;
			}
		}

		> .ball-clip-rotate-pulse {
			> div {
				&:first-child {
					background-color: extract(@CLR_1, 5);
					width: 50%;
					height: 50%;
					top: 25%;
					left: 25%;
				}

				&:last-child {
					border-color: extract(@CLR_1, 5) transparent;
					width: 100%;
					height: 100%;
					top: 0;
					left: 0;
				}
			}
		}

		> .ball-clip-rotate {
			> div {
				width: 100%;
				height: 100%;
				border-color: extract(@CLR_1, 5);
				border-bottom-color: transparent;
			}
		}

		> .ball-scale-ripple-multiple {
			> div {
				border-color: extract(@CLR_1, 5);
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
			}
		}

		> .ball-scale-multiple {
			> div {
				background-color: extract(@CLR_1, 5);
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
			}
		}

		> .line-spin-fade-loader {
			> div {
				background: extract(@CLR_1, 5);
				width: 10%;
				height: 25%;

				&:nth-child(1) {
					top: 75%;
					left: 45%;
				}

				&:nth-child(2) {
					top: 65%;
					left: 73.84%;
				}

				&:nth-child(3) {
					top: 37.5%;
					left: 87.5%;
				}

				&:nth-child(4) {
					top: 10%;
					left: 73.84%;
				}

				&:nth-child(5) {
					top: 0;
					left: 45%;
				}

				&:nth-child(6) {
					top: 10%;
					left: 17.32%;
				}

				&:nth-child(7) {
					top: 37.85%;
					left: 0;
				}

				&:nth-child(8) {
					top: 65%;
					left: 17.32%;
				}
			}
		}

		> .line-scale {
			> div {
				background: extract(@CLR_1, 5);
				width: 10%;
				height: 100%;
				margin: 0 5%;
			}
		}

		> .ball-pulse {
			> div {
				position: absolute;
				top: 37.5%;
				background: extract(@CLR_1, 5);
				width: 25%;
				height: 25%;
				margin: 0 4.16%;

				&:nth-child(1) {
					left: 0;
				}

				&:nth-child(2) {
					left: 33.32%;
				}

				&:nth-child(3) {
					left: 66.64%;
				}
			}
		}

		> .ball-grid-pulse {
			> div {
				background: extract(@CLR_1, 5);
				width: 25%;
				height: 25%;
				margin: 4.16%;
			}
		}

		> .square-spin {
			> div {
				background: extract(@CLR_1, 5);
				border: none;
				width: 100%;
				height: 100%;
			}
		}

		> .ball-clip-rotate-multiple {
			> div {
				&:nth-child(1) {
					border-color: extract(@CLR_1, 5) transparent;
					width: 100%;
					height: 100%;
					top: 0;
					left: 0;
				}

				&:nth-child(2) {
					border-color: transparent extract(@CLR_1, 5);
					width: 40%;
					height: 40%;
					top: 30%;
					left: 30%;
				}
			}
		}

		> .ball-pulse-rise {
			> div {
				position: absolute;
				top: 42%;
				background: extract(@CLR_1, 5);
				width: 16%;
				height: 16%;
				margin: 0 2%;

				&:nth-child(2n-1) {
					animation-name: material-ball-pulse-rise-odd;
				}

				&:nth-child(2n) {
					animation-name: material-ball-pulse-rise-even;
				}

				&:nth-child(1) {
					left: 0;
				}

				&:nth-child(2) {
					left: 20%;
				}

				&:nth-child(3) {
					left: 40%;
				}

				&:nth-child(4) {
					left: 60%;
				}

				&:nth-child(5) {
					left: 80%;
				}
			}
		}

		> .line-scale-party {
			> div {
				background: extract(@CLR_1, 5);
				width: 10%;
				height: 100%;
				margin: 0 5%;
			}
		}

		> .line-scale-pulse-out {
			> div {
				background: extract(@CLR_1, 5);
				width: 10%;
				height: 100%;
				margin: 0 5%;
			}
		}

		> .line-scale-pulse-out-rapid {
			> div {
				background: extract(@CLR_1, 5);
				width: 10%;
				height: 100%;
				margin: 0 5%;
			}
		}

		> .ball-pulse-sync {
			> div {
				position: absolute;
				top: 37.5%;
				background: extract(@CLR_1, 5);
				width: 25%;
				height: 25%;
				margin: 0 4.16%;
				animation-name: material-ball-pulse-sync;

				&:nth-child(1) {
					left: 0;
				}

				&:nth-child(2) {
					left: 33.32%;
				}

				&:nth-child(3) {
					left: 66.64%;
				}
			}
		}
	}

	&.disable {}

	&.stop {
		opacity: 0;
	}

	&.running {
		opacity: 1;
	}

	&.paused {}
}