2239a9c5f2b3ce288b8d2bda4ae883a0133b2f910cef7b0a860b3ecce1852930f71e3c308bf96bd825b1c5a1c2f95fc08a96298467465b3cdb24a954a57a6d 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  1. /*---------------------------------------------------------------------------------------------
  2. * Copyright (c) Microsoft Corporation. All rights reserved.
  3. * Licensed under the MIT License. See License.txt in the project root for license information.
  4. *--------------------------------------------------------------------------------------------*/
  5. .monaco-progress-container {
  6. width: 100%;
  7. height: 5px;
  8. overflow: hidden; /* keep progress bit in bounds */
  9. }
  10. .monaco-progress-container .progress-bit {
  11. width: 2%;
  12. height: 5px;
  13. position: absolute;
  14. left: 0;
  15. display: none;
  16. }
  17. .monaco-progress-container.active .progress-bit {
  18. display: inherit;
  19. }
  20. .monaco-progress-container.discrete .progress-bit {
  21. left: 0;
  22. transition: width 100ms linear;
  23. }
  24. .monaco-progress-container.discrete.done .progress-bit {
  25. width: 100%;
  26. }
  27. .monaco-progress-container.infinite .progress-bit {
  28. animation-name: progress;
  29. animation-duration: 4s;
  30. animation-iteration-count: infinite;
  31. transform: translate3d(0px, 0px, 0px);
  32. animation-timing-function: linear;
  33. }
  34. .monaco-progress-container.infinite.infinite-long-running .progress-bit {
  35. /*
  36. The more smooth `linear` timing function can cause
  37. higher GPU consumption as indicated in
  38. https://github.com/microsoft/vscode/issues/97900 &
  39. https://github.com/microsoft/vscode/issues/138396
  40. */
  41. animation-timing-function: steps(100);
  42. }
  43. /**
  44. * The progress bit has a width: 2% (1/50) of the parent container. The animation moves it from 0% to 100% of
  45. * that container. Since translateX is relative to the progress bit size, we have to multiple it with
  46. * its relative size to the parent container:
  47. * parent width: 5000%
  48. * bit width: 100%
  49. * translateX should be as follow:
  50. * 50%: 5000% * 50% - 50% (set to center) = 2450%
  51. * 100%: 5000% * 100% - 100% (do not overflow) = 4900%
  52. */
  53. @keyframes progress { from { transform: translateX(0%) scaleX(1) } 50% { transform: translateX(2500%) scaleX(3) } to { transform: translateX(4900%) scaleX(1) } }