imageuploadprogress.scss 941 B

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  1. // Infinite progress bar default width.
  2. $lineWidth: 30px;
  3. figure.image {
  4. position: relative;
  5. overflow: hidden;
  6. // Showing animation.
  7. &.ck-appear {
  8. animation: fadeIn 700ms;
  9. }
  10. // Infinite progress bar on top while image is read.
  11. &.ck-infinite-progress::before {
  12. content: "";
  13. width: $lineWidth;
  14. height: 2px;
  15. position: absolute;
  16. top: 0;
  17. right: 0;
  18. background: rgba(0, 0, 0, 0.1);
  19. animation-name: readingProgressAnimation;
  20. animation-duration: 1500ms;
  21. animation-iteration-count: infinite;
  22. transition-timing-function: linear;
  23. }
  24. // Upload progress bar.
  25. .ck-progress-bar {
  26. height: 2px;
  27. width: 0;
  28. position: absolute;
  29. top: 0;
  30. left: 0;
  31. background: #6ab5f9;
  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: $lineWidth;
  42. right: 0;
  43. }
  44. 50% {
  45. width: $lineWidth * 1.5;
  46. }
  47. 100% {
  48. right: 100%;
  49. }
  50. }