imageuploadprogress.css 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
  1. /*
  2. * Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. /* Infinite progress bar default width. */
  6. :root {
  7. --ck-image-upload-progress-line-width: 30px;
  8. }
  9. .ck.image {
  10. /* Showing animation. */
  11. &.ck-appear {
  12. animation: fadeIn 700ms;
  13. }
  14. /* Infinite progress bar on top while image is read. */
  15. &.ck-infinite-progress::before {
  16. width: var(--ck-image-upload-progress-line-width);
  17. height: 2px;
  18. background: var(--ck-color-upload-infinite-background);
  19. animation-name: readingProgressAnimation;
  20. animation-duration: 1500ms;
  21. animation-iteration-count: infinite;
  22. transition-timing-function: linear;
  23. }
  24. &.ck-image-upload-placeholder > img {
  25. width: 100%;
  26. }
  27. /* Upload progress bar. */
  28. & .ck-progress-bar {
  29. height: 2px;
  30. width: 0;
  31. background: var(--ck-color-upload-bar-background);
  32. transition: width 100ms;
  33. }
  34. }
  35. @keyframes fadeIn {
  36. from { opacity: 0; }
  37. to { opacity: 1; }
  38. }
  39. @keyframes readingProgressAnimation {
  40. 0% {
  41. width: var(--ck-image-upload-progress-line-width);
  42. right: 0;
  43. }
  44. 50% {
  45. width: calc(var(--ck-image-upload-progress-line-width) * 1.5);
  46. }
  47. 100% {
  48. right: 100%;
  49. }
  50. }