n8n/packages/design-system/theme/src/loading.scss

@use "mixins/mixins";
@use "./common/var";

@include mixins.b(loading-parent) {
	@include mixins.m(relative) {
		position: relative !important;
	}

	@include mixins.m(hidden) {
		overflow: hidden !important;
	}
}

@include mixins.b(loading-mask) {
	position: absolute;
	z-index: 2000;
	background-color: rgba(255, 255, 255, 0.9);
	margin: 0;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	transition: opacity 0.3s;

	@include mixins.when(fullscreen) {
		position: fixed;

		.el-loading-spinner {
			margin-top: #{- var.$loading-fullscreen-spinner-size * 0.5};

			.circular {
				height: var.$loading-fullscreen-spinner-size;
				width: var.$loading-fullscreen-spinner-size;
			}
		}
	}
}

@include mixins.b(loading-spinner) {
	top: 50%;
	margin-top: #{- var.$loading-spinner-size * 0.5};
	width: 100%;
	text-align: center;
	position: absolute;

	.el-loading-text {
		color: var(--color-primary);
		margin: 3px 0;
		font-size: 14px;
	}

	.circular {
		height: var.$loading-spinner-size;
		width: var.$loading-spinner-size;
		animation: loading-rotate 2s linear infinite;
	}

	.path {
		animation: loading-dash 1.5s ease-in-out infinite;
		stroke-dasharray: 90, 150;
		stroke-dashoffset: 0;
		stroke-width: 2;
		stroke: var(--color-primary);
		stroke-linecap: round;
	}

	i {
		color: var(--color-primary);
	}
}

.el-loading-fade-enter,
.el-loading-fade-leave-active {
	opacity: 0;
}

@keyframes loading-rotate {
	100% {
		transform: rotate(360deg);
	}
}

@keyframes loading-dash {
	0% {
		stroke-dasharray: 1, 200;
		stroke-dashoffset: 0;
	}
	50% {
		stroke-dasharray: 90, 150;
		stroke-dashoffset: -40px;
	}
	100% {
		stroke-dasharray: 90, 150;
		stroke-dashoffset: -120px;
	}
}