148 lines
3 KiB
Plaintext
148 lines
3 KiB
Plaintext
// .loader {
|
|
// height: 0;
|
|
// direction: ltr;
|
|
// position: fixed;
|
|
// top: 0;
|
|
// width: 0;
|
|
// margin: 0 auto;
|
|
// .func-start(0);
|
|
// opacity: 0;
|
|
// z-index: 4;
|
|
// }
|
|
|
|
// .load-start ~ .loader {
|
|
// width: 100%;
|
|
// background: var(--config-color-focus);
|
|
// height: 3px;
|
|
// opacity: 1;
|
|
// transition: width .3s ease-out, opacity .5s ease-out;
|
|
// -moz-transition: width .3s ease-out, opacity .5s ease-out;
|
|
// -webkit-transition: width .3s ease-out, opacity .5s ease-out;
|
|
// -o-transition: width .3s ease-out, opacity .5s ease-out;
|
|
// }
|
|
|
|
// .www .load-start ~ .loader {
|
|
// background: #fff;
|
|
// }
|
|
|
|
|
|
/*
|
|
.load-start > * {
|
|
opacity: 0;
|
|
}
|
|
|
|
.load-end > * {
|
|
opacity: 1;
|
|
transition: opacity .3s ease-out;
|
|
-moz-transition: opacity .3s ease-out;
|
|
-webkit-transition: opacity .3s ease-out;
|
|
-o-transition: opacity .3s ease-out;
|
|
}*/
|
|
|
|
[data-ls-if] {
|
|
display: none;
|
|
}
|
|
|
|
[data-service] {
|
|
opacity: 0;
|
|
}
|
|
|
|
.load-service-start {
|
|
opacity: 0;
|
|
}
|
|
|
|
.load-service-end {
|
|
opacity: 1;
|
|
transition: opacity .5s ease-out;
|
|
-moz-transition: opacity .5s ease-out;
|
|
-webkit-transition: opacity .5s ease-out;
|
|
-o-transition: opacity .5s ease-out;
|
|
}
|
|
|
|
.load-screen {
|
|
z-index: 100000;
|
|
position: fixed;
|
|
height: 100%;
|
|
width: 100%;
|
|
background-color: var(--config-color-background-focus);
|
|
top: 0;
|
|
.func-start(0);
|
|
|
|
&.loaded {
|
|
transition: opacity 1s ease-in-out, top 1s .7s;
|
|
opacity: 0;
|
|
top: -100%;
|
|
}
|
|
|
|
.animation {
|
|
position: absolute;
|
|
top: 45%;
|
|
left: 50%;
|
|
transform: translate(-50%,-50%) translateZ(1px);
|
|
width: 140px;
|
|
height: 140px;
|
|
}
|
|
|
|
.animation div {
|
|
box-sizing: border-box;
|
|
display: block;
|
|
position: absolute;
|
|
width: 124px;
|
|
height: 124px;
|
|
margin: 10px;
|
|
border: 10px solid var(--config-color-focus);
|
|
border-radius: 50%;
|
|
animation: animation 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
|
|
border-color: var(--config-color-focus) transparent transparent transparent;
|
|
}
|
|
.animation div:nth-child(1) {
|
|
animation-delay: -0.45s;
|
|
}
|
|
.animation div:nth-child(2) {
|
|
animation-delay: -0.3s;
|
|
}
|
|
.animation div:nth-child(3) {
|
|
animation-delay: -0.15s;
|
|
}
|
|
@keyframes animation {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
// .animation > div {
|
|
// display: inline-block;
|
|
// width: 64px;
|
|
// height: 64px;
|
|
// margin: 8px;
|
|
// border-radius: 50%;
|
|
// background: var(--config-color-focus);
|
|
// animation: animation 2.4s cubic-bezier(0, 0.2, 0.8, 1) infinite;
|
|
// }
|
|
// @keyframes animation {
|
|
// 0%, 100% {
|
|
// animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5);
|
|
// }
|
|
// 0% {
|
|
// transform: rotateY(0deg);
|
|
// }
|
|
// 50% {
|
|
// transform: rotateY(1800deg);
|
|
// animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1);
|
|
// }
|
|
// 100% {
|
|
// transform: rotateY(3600deg);
|
|
// }
|
|
// }
|
|
|
|
img {
|
|
position: absolute;
|
|
height: 20px;
|
|
bottom: 60px;
|
|
left: 50%;
|
|
transform: translate(-50%,-50%);
|
|
}
|
|
} |