mirror of
https://github.com/ckaczor/azuredatastudio.git
synced 2026-02-09 01:32:34 -05:00
63 lines
2.4 KiB
CSS
63 lines
2.4 KiB
CSS
/*---------------------------------------------------------------------------------------------
|
|
* Copyright (c) Microsoft Corporation. All rights reserved.
|
|
* Licensed under the Source EULA. 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;
|
|
animation-timing-function: linear;
|
|
-ms-animation-name: progress;
|
|
-ms-animation-duration: 4s;
|
|
-ms-animation-iteration-count: infinite;
|
|
-ms-animation-timing-function: linear;
|
|
-webkit-animation-name: progress;
|
|
-webkit-animation-duration: 4s;
|
|
-webkit-animation-iteration-count: infinite;
|
|
-webkit-animation-timing-function: linear;
|
|
-moz-animation-name: progress;
|
|
-moz-animation-duration: 4s;
|
|
-moz-animation-iteration-count: infinite;
|
|
-moz-animation-timing-function: linear;
|
|
will-change: transform;
|
|
}
|
|
|
|
/**
|
|
* 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:
|
|
* 50%: 50 * 50 = 2500%
|
|
* 100%: 50 * 100 - 50 (do not overflow): 4950%
|
|
*/
|
|
@keyframes progress { from { transform: translateX(0%) scaleX(1) } 50% { transform: translateX(2500%) scaleX(3) } to { transform: translateX(4950%) scaleX(1) } }
|
|
@-ms-keyframes progress { from { transform: translateX(0%) scaleX(1) } 50% { transform: translateX(2500%) scaleX(3) } to { transform: translateX(4950%) scaleX(1) } }
|
|
@-webkit-keyframes progress { from { transform: translateX(0%) scaleX(1) } 50% { transform: translateX(2500%) scaleX(3) } to { transform: translateX(4950%) scaleX(1) } }
|
|
@-moz-keyframes progress { from { transform: translateX(0%) scaleX(1) } 50% { transform: translateX(2500%) scaleX(3) } to { transform: translateX(4950%) scaleX(1) } } |