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 6.monaco-progress-container { 7 width: 100%; 8 height: 5px; 9 overflow: hidden; /* keep progress bit in bounds */ 10} 11 12.monaco-progress-container .progress-bit { 13 width: 2%; 14 height: 5px; 15 position: absolute; 16 left: 0; 17 display: none; 18} 19 20.monaco-progress-container.active .progress-bit { 21 display: inherit; 22} 23 24.monaco-progress-container.discrete .progress-bit { 25 left: 0; 26 transition: width 100ms linear; 27} 28 29.monaco-progress-container.discrete.done .progress-bit { 30 width: 100%; 31} 32 33.monaco-progress-container.infinite .progress-bit { 34 animation-name: progress; 35 animation-duration: 4s; 36 animation-iteration-count: infinite; 37 animation-timing-function: linear; 38 -ms-animation-name: progress; 39 -ms-animation-duration: 4s; 40 -ms-animation-iteration-count: infinite; 41 -ms-animation-timing-function: linear; 42 -webkit-animation-name: progress; 43 -webkit-animation-duration: 4s; 44 -webkit-animation-iteration-count: infinite; 45 -webkit-animation-timing-function: linear; 46 -moz-animation-name: progress; 47 -moz-animation-duration: 4s; 48 -moz-animation-iteration-count: infinite; 49 -moz-animation-timing-function: linear; 50 will-change: transform; 51} 52 53/** 54 * The progress bit has a width: 2% (1/50) of the parent container. The animation moves it from 0% to 100% of 55 * that container. Since translateX is relative to the progress bit size, we have to multiple it with 56 * its relative size to the parent container: 57 * 50%: 50 * 50 = 2500% 58 * 100%: 50 * 100 - 50 (do not overflow): 4950% 59 */ 60@keyframes progress { from { transform: translateX(0%) scaleX(1) } 50% { transform: translateX(2500%) scaleX(3) } to { transform: translateX(4950%) scaleX(1) } } 61@-ms-keyframes progress { from { transform: translateX(0%) scaleX(1) } 50% { transform: translateX(2500%) scaleX(3) } to { transform: translateX(4950%) scaleX(1) } } 62@-webkit-keyframes progress { from { transform: translateX(0%) scaleX(1) } 50% { transform: translateX(2500%) scaleX(3) } to { transform: translateX(4950%) scaleX(1) } } 63@-moz-keyframes progress { from { transform: translateX(0%) scaleX(1) } 50% { transform: translateX(2500%) scaleX(3) } to { transform: translateX(4950%) scaleX(1) } }