@import url(~antd/lib/spin/style/index-pure.less);
@import '../../style/themes/index';

@keyframes lodingmove {
	to {
		transform: rotate(360deg);
	}
}

@keyframes linemove {
	to {
		width: 100%;
	}
}

.@{spin-prefix-cls} {
	&-blur {
		overflow: hidden;
		& > * {
			filter: blur(6px);
		}
		&::after {
			opacity: 0.85;
			pointer-events: auto;
		}
	}
	&:not(.@{spin-prefix-cls}-line) {
		display: inline-flex;
		flex-direction: column;
		align-items: center;
	}
	.loading-svg {
		animation: lodingmove 1.2s infinite linear;
	}

	&-sm .loading-svg {
		width: @loading-circle-size-sm;
		height: @loading-circle-size-sm;
	}

	&-md .loading-svg {
		width: @loading-circle-size-md;
		height: @loading-circle-size-md;
	}

	&-lg .loading-svg {
		width: @loading-circle-size-lg;
		height: @loading-circle-size-lg;
	}

	&-xl .loading-svg {
		width: @loading-circle-size-xl;
		height: @loading-circle-size-xl;
	}

	.loading-line {
		height: @loading-line-size-md;
		overflow: hidden;

		.loading-line-bg {
			width: 0%;
			height: 100%;
			background-image: linear-gradient(
				90deg,
				var(~'--@{ant-prefix}-primary-color-deprecated-f-10', fade(@blue-60, 10%)),
				@primary-60
			);
			animation: linemove 1.2s 1 @ease-in-out forwards;

			&:before {
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				background: @component-background;

				opacity: 0;
				animation: ~'@{ant-prefix}-progress-active' 2.4s @ease-out-quint infinite;
				content: '';
			}
		}
	}
	&-sm .loading-line {
		width: 100%;
		min-width: 27px;
		border-radius: calc(~'@{loading-line-size-md} / 2');
		.loading-line-bg {
			border-radius: calc(~'@{loading-line-size-md} / 2');

			&:before {
				border-radius: calc(~'@{loading-line-size-md} / 2');
			}
		}
	}

	&-md .loading-line {
		min-width: 80px;
		width: 100%;
		height: @loading-line-size-lg;
		border-radius: calc(~'@{loading-line-size-lg} / 2');

		.loading-line-bg {
			border-radius: calc(~'@{loading-line-size-lg} / 2');

			&:before {
				border-radius: calc(~'@{loading-line-size-lg} / 2');
			}
		}
	}

	&-xl&-line {
		width: 100%;

		.loading-line {
			width: 100%;
			border-radius: calc(~'@{loading-line-size-lg} / 2');

			.loading-line-bg:before {
				animation: ~'@{ant-prefix}-progress-active' 6s @ease-out-quint infinite;
			}
		}
	}

	//彩色

	.loading-color-classes(@i: length(@bdesign-preset-colors)) when (@i > 0) {
		.loading-color-classes(@i - 1);
		@color: extract(@bdesign-preset-colors, @i);
		@lightColor: '@{color}-60';

		&-@{color} {
			.loading-line .loading-line-bg {
				background-image: linear-gradient(90deg, fade(@@lightColor, 10%), @@lightColor);
			}
		}

		&-@{color} {
			svg #linearGradient-@{color} {
				.stop1,
				.stop2 {
					stop-color: @@lightColor;
				}
			}
		}
	}

	&-white {
		.loading-line .loading-line-bg {
			background-image: linear-gradient(90deg, fade(@white, 10%), @white);
		}
		svg #linearGradient-white {
			.stop1,
			.stop2 {
				stop-color: @white;
			}
		}
	}
	&-primary {
		svg #linearGradient-primary {
			.stop1,
			.stop2 {
				stop-color: @primary-60;
			}
		}
	}

	.loading-color-classes();
}