@import '../../style/mixin';

.h-loading {
	@include position(absolute, 9000, top, 0, left, 0);
	@include view();
	@include rgba(#000, 0.1);

	&-wapper {
		.spin {
			@include position(absolute, 9999, top, calc(50% - 12px), left, calc(50% - 12px));
			@include view(24px, 24px);
			animation: hSpinRotate 1.5s infinite linear;
			transform-origin: 50% 50%;

			&-1, &-2, &-3, &-4 {
				float: left;
				@include view(8px, 8px);
				border-radius: 50%;
				background: #f00;
				margin: 2px;
			}

			@for $index from 1 through 4 {
				&-#{$index} {
					@include rgba(#1890ff, 1/$index);
				}
			}
		}
	}
}


@-webkit-keyframes hSpinRotate {
	to {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

@keyframes hSpinRotate {
	to {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}