Added styles for upload complete icon

theme/ckeditor5-image/imageuploadicon.css

@@ -0,0 +1,95 @@
+/*
+ * Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+:root {
+	--ck-color-image-upload-icon: hsl(0, 0%, 100%);
+	--ck-color-image-upload-icon-background: hsl(120, 100%, 27%);
+
+	--ck-image-upload-icon-size: 1.25em;
+	--ck-image-upload-icon-width: 2px;
+}
+
+.ck-image-upload-complete-icon {
+	width: var(--ck-image-upload-icon-size);
+	height: var(--ck-image-upload-icon-size);
+	opacity: 0;
+	background: var(--ck-color-image-upload-icon-background);
+	animation-name: ck-upload-complete-icon-show, ck-upload-complete-icon-hide;
+	animation-fill-mode: forwards, forwards;
+	animation-duration: 500ms, 500ms;
+
+	/* Hide completed upload icon after 3 seconds. */
+	animation-delay: 0ms, 3000ms;
+
+	/* This is check icon element made from border-width mixed with animations. */
+	&::after {
+		/* Because of border transformation we need to "hard code" left position. */
+		left: 25%;
+
+		top: 50%;
+		opacity: 0;
+		height: 0;
+		width: 0;
+
+		transform: scaleX(-1) rotate(135deg);
+		transform-origin: left top;
+		border-top: var(--ck-image-upload-icon-width) solid var(--ck-color-image-upload-icon);
+		border-right: var(--ck-image-upload-icon-width) solid var(--ck-color-image-upload-icon);
+
+		animation-name: ck-upload-complete-icon-check;
+		animation-duration: 500ms;
+		animation-delay: 500ms;
+		animation-fill-mode: forwards;
+	}
+}
+
+@keyframes ck-upload-complete-icon-show {
+	from {
+		opacity: 0;
+	}
+
+	to {
+		opacity: 1;
+	}
+}
+
+@keyframes ck-upload-complete-icon-hide {
+	from {
+		opacity: 1;
+	}
+
+	to {
+		opacity: 0;
+	}
+}
+
+@keyframes ck-upload-complete-icon-check {
+	0% {
+		opacity: 1;
+		height: 0;
+		width: 0;
+	}
+	33% {
+		/*
+		 * We need to use here hardcoded values because Edge is not supporting calc() in @keyframes.
+		 * It should be: width: calc( var(--ck-image-upload-icon-size) / 5 );
+		 */
+		width: 0.25em;
+
+		height: 0;
+	}
+	100% {
+		/*
+		 * We need to use here hardcoded values because Edge is not supporting calc() in @keyframes.
+		 * It should be:
+		 * height: calc( var(--ck-image-upload-icon-size) / 3 );
+		 * width: calc( var(--ck-image-upload-icon-size) / 5 );
+		 */
+		width: 0.25em;
+		height: 0.416em;
+
+		opacity: 1;
+	}
+}