| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061 |
- /*---------------------------------------------------------------------------------------------
- * Copyright (c) Microsoft Corporation. All rights reserved.
- * Licensed under the MIT License. See License.txt in the project root for license information.
- *--------------------------------------------------------------------------------------------*/
- .monaco-progress-container {
- width: 100%;
- height: 5px;
- overflow: hidden; /* keep progress bit in bounds */
- }
- .monaco-progress-container .progress-bit {
- width: 2%;
- height: 5px;
- position: absolute;
- left: 0;
- display: none;
- }
- .monaco-progress-container.active .progress-bit {
- display: inherit;
- }
- .monaco-progress-container.discrete .progress-bit {
- left: 0;
- transition: width 100ms linear;
- }
- .monaco-progress-container.discrete.done .progress-bit {
- width: 100%;
- }
- .monaco-progress-container.infinite .progress-bit {
- animation-name: progress;
- animation-duration: 4s;
- animation-iteration-count: infinite;
- transform: translate3d(0px, 0px, 0px);
- animation-timing-function: linear;
- }
- .monaco-progress-container.infinite.infinite-long-running .progress-bit {
- /*
- The more smooth `linear` timing function can cause
- higher GPU consumption as indicated in
- https://github.com/microsoft/vscode/issues/97900 &
- https://github.com/microsoft/vscode/issues/138396
- */
- animation-timing-function: steps(100);
- }
- /**
- * The progress bit has a width: 2% (1/50) of the parent container. The animation moves it from 0% to 100% of
- * that container. Since translateX is relative to the progress bit size, we have to multiple it with
- * its relative size to the parent container:
- * parent width: 5000%
- * bit width: 100%
- * translateX should be as follow:
- * 50%: 5000% * 50% - 50% (set to center) = 2450%
- * 100%: 5000% * 100% - 100% (do not overflow) = 4900%
- */
- @keyframes progress { from { transform: translateX(0%) scaleX(1) } 50% { transform: translateX(2500%) scaleX(3) } to { transform: translateX(4900%) scaleX(1) } }
|