@ckeditor/ckeditor5-ai/theme/common/aispinner.css

AI features for CKEditor 5.

/*
 * What you're currently looking at is the source code of a legally protected, proprietary software.
 * CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
 * all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
 *
 * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
 * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
 */

:root {
	--ck-ai-spinner-size: var(--ck-toolbar-spinner-size);
	--ck-ai-spinner-background: linear-gradient(to right, hsl(0, 0%, 100%), hsl(0, 0%, 58%));
	--ck-ai-spinner-mask: radial-gradient(farthest-side, transparent 66%, hsl(0, 0%, 0%) 61%);
	--ck-ai-spinner-animation-duration: 1s;
}

.ck.ck-spinner-container {
	&.ck-ai-spinner {
		display: inline-block;
		width: var(--ck-ai-spinner-size);
		height: var(--ck-ai-spinner-size);
		margin: 0;
		flex-shrink: 0;
		animation-duration: var(--ck-ai-spinner-animation-duration);

		& .ck-spinner {
			width: var(--ck-ai-spinner-size);
			height: var(--ck-ai-spinner-size);

			border: none;

			background: var(--ck-ai-spinner-background);
			-webkit-mask: var(--ck-ai-spinner-mask);
			mask: var(--ck-ai-spinner-mask);

			box-sizing: border-box;
		}

		&.ck-ai-spinner_small {
			--ck-ai-spinner-size: 1em;
		}

		&.ck-ai-spinner_tiny {
			--ck-ai-spinner-size: 12px;
		}
	}

	&.ck-hidden {
		display: none;
		animation: none;
	}
}

@keyframes ck-spin {
	to {
		transform: rotate(360deg);
	}
}