Commit d93dcdb0 authored by Dennis Tang's avatar Dennis Tang Committed by Annabel Gray

port 49776-pipeline-job-log-page-uses-too-much-cpu-for-loading-animation to EE

parent 474186b6
......@@ -131,6 +131,9 @@ export default {
v-show="detailJob.isLoading"
class="build-loader-animation"
>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</pre>
</div>
......
......@@ -22,7 +22,7 @@
border: 0;
border-color: $md-area-border;
@supports(width: fit-content) {
@supports (width: fit-content) {
display: block;
width: fit-content;
}
......@@ -116,7 +116,7 @@
/* http://phrappe.com/css/conditional-css-for-webkit-based-browsers/ */
@mixin on-webkit-only {
@media screen and (-webkit-min-device-pixel-ratio:0) {
@media screen and (-webkit-min-device-pixel-ratio: 0) {
@content;
}
}
......@@ -164,14 +164,18 @@
bottom: 12px;
width: 43px;
height: 30px;
transition-duration: .3s;
transition-duration: 0.3s;
-webkit-transform: translateZ(0);
background: linear-gradient(to $gradient-direction, $gradient-color 45%, rgba($gradient-color, 0.4));
background: linear-gradient(
to $gradient-direction,
$gradient-color 45%,
rgba($gradient-color, 0.4)
);
&.scrolling {
visibility: visible;
opacity: 1;
transition-duration: .3s;
transition-duration: 0.3s;
}
.fa {
......@@ -323,13 +327,27 @@
}
}
@mixin build-loader-animation() {
@mixin build-loader-animation {
position: relative;
width: 6px;
height: 6px;
margin: auto auto 12px 2px;
border-radius: 50%;
animation: blinking-dots 1s linear infinite;
white-space: initial;
.dot {
display: inline-block;
width: 6px;
height: 6px;
margin: auto auto 12px;
border-radius: 50%;
animation: blinking-dot 1s linear infinite;
background: $white-light;
&:nth-child(2) {
animation-delay: 0.33s;
}
&:nth-child(3) {
animation-delay: 0.66s;
}
}
}
@mixin borderless-status-icon($color) {
......
......@@ -9,25 +9,21 @@
}
}
@keyframes blinking-dots {
@keyframes blinking-dot {
0% {
background-color: rgba($white-light, 1);
box-shadow: 12px 0 0 0 rgba($white-light, 0.2), 24px 0 0 0 rgba($white-light, 0.2);
opacity: 1;
}
25% {
background-color: rgba($white-light, 0.4);
box-shadow: 12px 0 0 0 rgba($white-light, 2), 24px 0 0 0 rgba($white-light, 0.2);
opacity: 0.4;
}
75% {
background-color: rgba($white-light, 0.4);
box-shadow: 12px 0 0 0 rgba($white-light, 0.2), 24px 0 0 0 rgba($white-light, 1);
opacity: 0.4;
}
100% {
background-color: rgba($white-light, 1);
box-shadow: 12px 0 0 0 rgba($white-light, 0.2), 24px 0 0 0 rgba($white-light, 0.2);
opacity: 1;
}
}
......@@ -116,7 +112,7 @@
}
.build-loader-animation {
@include build-loader-animation();
@include build-loader-animation;
}
}
......
%pre.build-trace#build-trace
%code.bash.js-build-output
.build-loader-animation.js-build-refresh
.dot
.dot
.dot
......@@ -63,6 +63,6 @@
}
.build-loader-animation {
@include build-loader-animation();
@include build-loader-animation;
}
}
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment