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;
|
z-index: 100;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header:not(.meta-init) {
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header.meta-init-error {
|
.header.meta-init-error {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
@ -79,7 +75,7 @@ svg.icon {
|
||||||
font-size: 80%;
|
font-size: 80%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header > :first-child {
|
h1 {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -139,6 +135,218 @@ li {
|
||||||
border: none;
|
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 ************/
|
/************ reponsive layouts ************/
|
||||||
|
|
||||||
@media (max-width:10in) {
|
@media (max-width:10in) {
|
||||||
|
|
|
||||||
|
|
@ -41,6 +41,16 @@
|
||||||
let liveReloadPending = Promise.resolve();
|
let liveReloadPending = Promise.resolve();
|
||||||
window.addEventListener('resize', adjustCodeHeight);
|
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) {
|
function liveReloadUpdate(sourceCode) {
|
||||||
liveReloadPending = liveReloadPending.then(() => {
|
liveReloadPending = liveReloadPending.then(() => {
|
||||||
const scrollInfo = cm.getScrollInfo();
|
const scrollInfo = cm.getScrollInfo();
|
||||||
|
|
@ -100,6 +110,8 @@
|
||||||
|
|
||||||
$('.header').classList.add('meta-init');
|
$('.header').classList.add('meta-init');
|
||||||
$('.header').classList.remove('meta-init-error');
|
$('.header').classList.remove('meta-init-error');
|
||||||
|
setTimeout(() => $('.lds-spinner').remove(), 1000);
|
||||||
|
|
||||||
showError('');
|
showError('');
|
||||||
requestAnimationFrame(adjustCodeHeight);
|
requestAnimationFrame(adjustCodeHeight);
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user