/* * Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { --ck-color-upload-placeholder-loader: hsl(0, 0%, 70%); --ck-upload-placeholder-loader-size: 32px; } .ck .ck-image-upload-placeholder { /* We need to control the full width of the SVG gray background. */ width: 100%; margin: 0; } .ck .ck-upload-placeholder-loader { width: 100%; height: 100%; &::before { width: var(--ck-upload-placeholder-loader-size); height: var(--ck-upload-placeholder-loader-size); border-radius: 50%; border-top: 3px solid var(--ck-color-upload-placeholder-loader); border-right: 2px solid transparent; animation: ck-upload-placeholder-loader 1s linear infinite; } } @keyframes ck-upload-placeholder-loader { to { transform: rotate( 360deg ); } }