show a spinner on usercss install page while fetching code
This commit is contained in:
tophf
parent
e7175c261a
commit
ea277bcf4c
|
|
@ -44,10 +44,6 @@ svg.icon {
|
|||
z-index: 100;
|
||||
}
|
||||
|
||||
.header:not(.meta-init) {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.header.meta-init-error {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -79,7 +75,7 @@ svg.icon {
|
|||
font-size: 80%;
|
||||
}
|
||||
|
||||
.header > :first-child {
|
||||
h1 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
|
|
@ -139,6 +135,218 @@ li {
|
|||
border: none;
|
||||
}
|
||||
|
||||
/* spinner-related */
|
||||
|
||||
.header {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.header:not(.meta-init) > *:not(.lds-spinner),
|
||||
.header.meta-init > .lds-spinner {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.header.meta-init > * {
|
||||
opacity: 1;
|
||||
transition: opacity .5s;
|
||||
-webkit-user-select: auto;
|
||||
-moz-user-select: auto;
|
||||
-ms-user-select: auto;
|
||||
user-select: auto;
|
||||
}
|
||||
|
||||
/* spinner: https://github.com/loadingio/css-spinner */
|
||||
|
||||
@keyframes lds-spinner {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes lds-spinner {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
.lds-spinner {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
top: 50px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
opacity: .2;
|
||||
transition: opacity .5s;
|
||||
}
|
||||
.lds-spinner div {
|
||||
left: 94px;
|
||||
top: 23px;
|
||||
position: absolute;
|
||||
-webkit-animation: lds-spinner linear 1s infinite;
|
||||
animation: lds-spinner linear 1s infinite;
|
||||
background: currentColor;
|
||||
width: 12px;
|
||||
height: 34px;
|
||||
border-radius: 20%;
|
||||
-webkit-transform-origin: 6px 77px;
|
||||
transform-origin: 6px 77px;
|
||||
}
|
||||
.lds-spinner div:nth-child(1) {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
-webkit-animation-delay: -0.916666666666667s;
|
||||
animation-delay: -0.916666666666667s;
|
||||
}
|
||||
.lds-spinner div:nth-child(2) {
|
||||
-webkit-transform: rotate(30deg);
|
||||
transform: rotate(30deg);
|
||||
-webkit-animation-delay: -0.833333333333333s;
|
||||
animation-delay: -0.833333333333333s;
|
||||
}
|
||||
.lds-spinner div:nth-child(3) {
|
||||
-webkit-transform: rotate(60deg);
|
||||
transform: rotate(60deg);
|
||||
-webkit-animation-delay: -0.75s;
|
||||
animation-delay: -0.75s;
|
||||
}
|
||||
.lds-spinner div:nth-child(4) {
|
||||
-webkit-transform: rotate(90deg);
|
||||
transform: rotate(90deg);
|
||||
-webkit-animation-delay: -0.666666666666667s;
|
||||
animation-delay: -0.666666666666667s;
|
||||
}
|
||||
.lds-spinner div:nth-child(5) {
|
||||
-webkit-transform: rotate(120deg);
|
||||
transform: rotate(120deg);
|
||||
-webkit-animation-delay: -0.583333333333333s;
|
||||
animation-delay: -0.583333333333333s;
|
||||
}
|
||||
.lds-spinner div:nth-child(6) {
|
||||
-webkit-transform: rotate(150deg);
|
||||
transform: rotate(150deg);
|
||||
-webkit-animation-delay: -0.5s;
|
||||
animation-delay: -0.5s;
|
||||
}
|
||||
.lds-spinner div:nth-child(7) {
|
||||
-webkit-transform: rotate(180deg);
|
||||
transform: rotate(180deg);
|
||||
-webkit-animation-delay: -0.416666666666667s;
|
||||
animation-delay: -0.416666666666667s;
|
||||
}
|
||||
.lds-spinner div:nth-child(8) {
|
||||
-webkit-transform: rotate(210deg);
|
||||
transform: rotate(210deg);
|
||||
-webkit-animation-delay: -0.333333333333333s;
|
||||
animation-delay: -0.333333333333333s;
|
||||
}
|
||||
.lds-spinner div:nth-child(9) {
|
||||
-webkit-transform: rotate(240deg);
|
||||
transform: rotate(240deg);
|
||||
-webkit-animation-delay: -0.25s;
|
||||
animation-delay: -0.25s;
|
||||
}
|
||||
.lds-spinner div:nth-child(10) {
|
||||
-webkit-transform: rotate(270deg);
|
||||
transform: rotate(270deg);
|
||||
-webkit-animation-delay: -0.166666666666667s;
|
||||
animation-delay: -0.166666666666667s;
|
||||
}
|
||||
.lds-spinner div:nth-child(11) {
|
||||
-webkit-transform: rotate(300deg);
|
||||
transform: rotate(300deg);
|
||||
-webkit-animation-delay: -0.083333333333333s;
|
||||
animation-delay: -0.083333333333333s;
|
||||
}
|
||||
.lds-spinner div:nth-child(12) {
|
||||
-webkit-transform: rotate(330deg);
|
||||
transform: rotate(330deg);
|
||||
-webkit-animation-delay: 0s;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
/* https://github.com/lukehaas/css-loaders */
|
||||
/*
|
||||
.spinner {
|
||||
--color: currentColor;
|
||||
--background-color: currentColor;
|
||||
font-size: 10px;
|
||||
margin: 50px auto;
|
||||
text-indent: -9999em;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
border-radius: 50%;
|
||||
background: #ffffff;
|
||||
background: -moz-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
|
||||
background: -webkit-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
|
||||
background: -o-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
|
||||
background: -ms-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
|
||||
background: linear-gradient(to right, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
|
||||
position: relative;
|
||||
-webkit-animation: load3 1.4s infinite linear;
|
||||
animation: load3 1.4s infinite linear;
|
||||
-webkit-transform: translateZ(0);
|
||||
-ms-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
||||
.spinner:before {
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
background: #ffffff;
|
||||
border-radius: 100% 0 0 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
content: '';
|
||||
}
|
||||
|
||||
.spinner:after {
|
||||
background: #0dc5c1;
|
||||
width: 75%;
|
||||
height: 75%;
|
||||
border-radius: 50%;
|
||||
content: '';
|
||||
margin: auto;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
*/
|
||||
|
||||
@-webkit-keyframes load3 {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@keyframes load3 {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/************ reponsive layouts ************/
|
||||
|
||||
@media (max-width:10in) {
|
||||
|
|
|
|||
|
|
@ -41,6 +41,16 @@
|
|||
let liveReloadPending = Promise.resolve();
|
||||
window.addEventListener('resize', adjustCodeHeight);
|
||||
|
||||
setTimeout(() => {
|
||||
if (!installed) {
|
||||
const div = $element({});
|
||||
$('.header').appendChild($element({
|
||||
className: 'lds-spinner',
|
||||
appendChild: new Array(12).fill(div).map(e => e.cloneNode()),
|
||||
}));
|
||||
}
|
||||
}, 200);
|
||||
|
||||
function liveReloadUpdate(sourceCode) {
|
||||
liveReloadPending = liveReloadPending.then(() => {
|
||||
const scrollInfo = cm.getScrollInfo();
|
||||
|
|
@ -100,6 +110,8 @@
|
|||
|
||||
$('.header').classList.add('meta-init');
|
||||
$('.header').classList.remove('meta-init-error');
|
||||
setTimeout(() => $('.lds-spinner').remove(), 1000);
|
||||
|
||||
showError('');
|
||||
requestAnimationFrame(adjustCodeHeight);
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user