imageuploadprogress.scss 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  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. // Upload progress bar.
  27. .ck-progress-bar {
  28. height: 2px;
  29. width: 0;
  30. position: absolute;
  31. top: 0;
  32. left: 0;
  33. background: #6ab5f9;
  34. transition: width 100ms;
  35. }
  36. }
  37. @keyframes fadeIn {
  38. from { opacity: 0; }
  39. to { opacity: 1; }
  40. }
  41. @keyframes readingProgressAnimation {
  42. 0% {
  43. width: $lineWidth;
  44. right: 0;
  45. }
  46. 50% {
  47. width: $lineWidth * 1.5;
  48. }
  49. 100% {
  50. right: 100%;
  51. }
  52. }