@gravityforms/components/css/admin/loaders/loader.css

UI components for use in Gravity Forms development. Both React and vanilla js flavors.

.gform-admin {

	.gform-loader__mask {
		align-items: center;
		display: flex;
		flex-direction: column;
		height: 100%;
		left: 0;
		position: absolute;
		top: 0;
		width: 100%;
		z-index: 10000;

		&.gform-loader__mask--theme-light {
			background-color: rgba(247, 249, 252, 0.93);
		}

		&.gform-loader__mask--theme-dark {
			background-color: rgba(36, 39, 72, 0.93);
		}
	}

	.gform-loader__mask--position-top {
		justify-content: start;

		.gform-loader__mask-positioner {
			top: 12%;
		}
	}

	.gform-loader__mask--position-center {
		justify-content: center;
	}

	.gform-loader__mask--position-bottom {
		justify-content: end;

		.gform-loader__mask-positioner {
			bottom: 12%;
		}
	}

	.gform-loader__mask--position-sticky {

		.gform-loader__mask-positioner {
			position: sticky;
		}
	}

	.gform-loader__mask-positioner {
		position: relative;
	}

	.gform-loader--simple {
		animation: gformLoader1 1.1s infinite linear;
		border-bottom: 1.1em solid #000;
		border-left: 1.1em solid #000;
		border-radius: 50%;
		border-right: 1.1em solid #fff;
		border-top: 1.1em solid #fff;
		display: inline-block;
		font-size: 10px;
		height: 10em;
		position: relative;
		transform: translateZ(0);
		width: 10em;
	}

	.gform-loader__inner {
		display: inline-flex;
		flex-direction: column;
	}

	.gform-loader__text {
		display: block;
		font-family: var(--gform-admin-font-family-base);
		font-size: var(--gform-admin-font-size-base-old);
		font-weight: var(--gform-common-font-weight-medium);
		margin-top: 16px;
		text-align: center;
	}

	.gform-loader--ring {
		animation: gformLoaderRotate 2s linear infinite;
		height: 40px;
		transform-origin: center;
		vertical-align: middle;
		width: 40px;
		will-change: transform;

		circle {
			animation: gformLoaderStretch calc(2s * 0.75) ease-in-out infinite;
			fill: none;
			stroke: var(--gform-admin-color-chathams);
			stroke-dasharray: 1, 200;
			stroke-dashoffset: 0;
			stroke-linecap: round;
			will-change: stroke-dasharray, stroke-dashoffset;
		}
	}
}

@keyframes gformLoader1 {

	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

@keyframes gformLoaderRotate {

	100% {
		transform: rotate(360deg);
	}
}

@keyframes gformLoaderStretch {

	0% {
		stroke-dasharray: 1, 200;
		stroke-dashoffset: 0;
	}

	50% {
		stroke-dasharray: 90, 200;
		stroke-dashoffset: -35px;
	}

	100% {
		stroke-dashoffset: -124px;
	}
}