瀏覽代碼

Merge pull request #188 from ckeditor/t/ckeditor5-image/207

Feature: Implemented a CSS–styled image upload loader (see ckeditor/ckeditor5-image#207).
Aleksander Nowodzinski 7 年之前
父節點
當前提交
1c232aeb70

+ 35 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-image/imageuploadloader.css

@@ -0,0 +1,35 @@
+/*
+ * Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+: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 );
+	}
+}

+ 0 - 30
packages/ckeditor5-theme-lark/theme/ckeditor5-image/imageuploadprogress.css

@@ -14,21 +14,6 @@
 		animation: fadeIn 700ms;
 	}
 
-	/* Infinite progress bar on top while image is read. */
-	&.ck-infinite-progress::before {
-		width: var(--ck-image-upload-progress-line-width);
-		height: 2px;
-		background: var(--ck-color-upload-infinite-background);
-		animation-name: readingProgressAnimation;
-		animation-duration: 1500ms;
-		animation-iteration-count: infinite;
-		transition-timing-function: linear;
-	}
-
-	&.ck-image-upload-placeholder > img {
-		width: 100%;
-	}
-
 	/* Upload progress bar. */
 	& .ck-progress-bar {
 		height: 2px;
@@ -42,18 +27,3 @@
 	from { opacity: 0; }
 	to   { opacity: 1; }
 }
-
-@keyframes readingProgressAnimation {
-	0% {
-		width: var(--ck-image-upload-progress-line-width);
-		right: 0;
-	}
-
-	50% {
-		width: calc(var(--ck-image-upload-progress-line-width) * 1.5);
-	}
-
-	100% {
-		right: 100%;
-	}
-}