imageuploadprogress.scss 1.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
  1. // Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
  2. // For licensing, see LICENSE.md or http://ckeditor.com/license
  3. // Infinite progress bar default width.
  4. $lineWidth: 30px;
  5. figure.image {
  6. position: relative;
  7. overflow: hidden;
  8. // Showing animation.
  9. &.ck-appear {
  10. animation: fadeIn 700ms;
  11. }
  12. // Infinite progress bar on top while image is read.
  13. &.ck-infinite-progress::before {
  14. content: "";
  15. width: $lineWidth;
  16. height: 2px;
  17. position: absolute;
  18. top: 0;
  19. right: 0;
  20. background: rgba(0, 0, 0, 0.1);
  21. animation-name: readingProgressAnimation;
  22. animation-duration: 1500ms;
  23. animation-iteration-count: infinite;
  24. transition-timing-function: linear;
  25. }
  26. &.ck-image-upload-placeholder > img {
  27. width: 100%;
  28. }
  29. // Upload progress bar.
  30. .ck-progress-bar {
  31. height: 2px;
  32. width: 0;
  33. position: absolute;
  34. top: 0;
  35. left: 0;
  36. background: #6ab5f9;
  37. transition: width 100ms;
  38. }
  39. }
  40. @keyframes fadeIn {
  41. from { opacity: 0; }
  42. to { opacity: 1; }
  43. }
  44. @keyframes readingProgressAnimation {
  45. 0% {
  46. width: $lineWidth;
  47. right: 0;
  48. }
  49. 50% {
  50. width: $lineWidth * 1.5;
  51. }
  52. 100% {
  53. right: 100%;
  54. }
  55. }