imageuploadprogress.scss 866 B

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  1. // Move it to image/widget.
  2. figure.image.ck-widget {
  3. position: relative;
  4. overflow: hidden;
  5. }
  6. // Showing animation.
  7. .ck-appear {
  8. animation: fadeIn 700ms;
  9. }
  10. @keyframes fadeIn {
  11. from { opacity: 0; }
  12. to { opacity: 1; }
  13. }
  14. // Infinite progress bar on top.
  15. $lineWidth: 30px;
  16. .ck-infinite-progress::before {
  17. content: "";
  18. width: $lineWidth;
  19. height: 2px;
  20. position: absolute;
  21. top: 0;
  22. right: 0;
  23. background: rgba(0, 0, 0, 0.1);
  24. animation-name: readingProgressAnimation;
  25. animation-duration: 1500ms;
  26. animation-iteration-count: infinite;
  27. transition-timing-function: linear;
  28. }
  29. .ck-progress-bar {
  30. height: 2px;
  31. width: 0;
  32. position: absolute;
  33. top: 0;
  34. left: 0;
  35. background: #6ab5f9;
  36. transition: width 100ms;
  37. }
  38. @keyframes readingProgressAnimation {
  39. 0% {
  40. width: $lineWidth;
  41. right: 0;
  42. }
  43. 50% {
  44. width: $lineWidth * 1.5;
  45. }
  46. 100% {
  47. right: 100%;
  48. }
  49. }