183 lines
3.2 KiB
SCSS
183 lines
3.2 KiB
SCSS
/* ====
|
|
--------- (3.03) preloader styles start ---------
|
|
==== */
|
|
|
|
.ctn-preloader {
|
|
align-items: center;
|
|
cursor: none;
|
|
display: flex;
|
|
height: 100%;
|
|
justify-content: center;
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
z-index: 99999;
|
|
}
|
|
|
|
.ctn-preloader .animation-preloader {
|
|
position: absolute;
|
|
z-index: 100;
|
|
}
|
|
|
|
.ctn-preloader .animation-preloader .spinner {
|
|
animation: spinner 1s infinite linear;
|
|
border-radius: 50%;
|
|
border: 4px solid #ffffff50;
|
|
border-top-color: var(--enterprise-blue);
|
|
height: 9em;
|
|
margin: 0 auto 3.5em auto;
|
|
width: 9em;
|
|
}
|
|
|
|
.ctn-preloader .animation-preloader .txt-loading {
|
|
text-align: center;
|
|
user-select: none;
|
|
span {
|
|
font-size: 30px;
|
|
letter-spacing: 2px;
|
|
font-weight: 400;
|
|
}
|
|
}
|
|
|
|
.ctn-preloader .animation-preloader .txt-loading .letters-loading:before {
|
|
animation: letters-loading 4s infinite;
|
|
color: var(--enterprise-blue);
|
|
content: attr(data-text-preloader);
|
|
left: 0;
|
|
opacity: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
transform: rotateY(-90deg);
|
|
}
|
|
|
|
.ctn-preloader .animation-preloader .txt-loading .letters-loading {
|
|
color: #ffffff50;
|
|
position: relative;
|
|
}
|
|
|
|
.ctn-preloader
|
|
.animation-preloader
|
|
.txt-loading
|
|
.letters-loading:nth-child(2):before {
|
|
animation-delay: 0.2s;
|
|
}
|
|
|
|
.ctn-preloader
|
|
.animation-preloader
|
|
.txt-loading
|
|
.letters-loading:nth-child(3):before {
|
|
animation-delay: 0.4s;
|
|
}
|
|
|
|
.ctn-preloader
|
|
.animation-preloader
|
|
.txt-loading
|
|
.letters-loading:nth-child(4):before {
|
|
animation-delay: 0.6s;
|
|
}
|
|
|
|
.ctn-preloader
|
|
.animation-preloader
|
|
.txt-loading
|
|
.letters-loading:nth-child(5):before {
|
|
animation-delay: 0.8s;
|
|
}
|
|
|
|
.ctn-preloader
|
|
.animation-preloader
|
|
.txt-loading
|
|
.letters-loading:nth-child(6):before {
|
|
animation-delay: 1s;
|
|
}
|
|
|
|
.ctn-preloader
|
|
.animation-preloader
|
|
.txt-loading
|
|
.letters-loading:nth-child(7):before {
|
|
animation-delay: 1.2s;
|
|
}
|
|
|
|
.ctn-preloader .loader-section {
|
|
background-color: #030015;
|
|
height: 100%;
|
|
position: fixed;
|
|
top: 0;
|
|
width: calc(50% + 1px);
|
|
}
|
|
|
|
.ctn-preloader .loader-section.section-left {
|
|
left: 0;
|
|
}
|
|
|
|
.ctn-preloader .loader-section.section-right {
|
|
right: 0;
|
|
}
|
|
|
|
.loaded .animation-preloader {
|
|
opacity: 0;
|
|
transition: 0.3s ease-out;
|
|
}
|
|
|
|
.loaded .loader-section.section-left {
|
|
background-color: var(--enterprise-blue) !important;
|
|
transform: translateX(-101%);
|
|
transition: 0.7s 0.3s all cubic-bezier(0.1, 0.1, 0.1, 1);
|
|
}
|
|
|
|
.loaded .loader-section.section-right {
|
|
transform: translateX(101%);
|
|
transition: 0.7s 0.3s all cubic-bezier(0.1, 0.1, 0.1, 1);
|
|
}
|
|
|
|
@keyframes spinner {
|
|
to {
|
|
transform: rotateZ(360deg);
|
|
}
|
|
}
|
|
|
|
@keyframes letters-loading {
|
|
0%,
|
|
75%,
|
|
100% {
|
|
opacity: 0;
|
|
transform: rotateY(-90deg);
|
|
}
|
|
|
|
25%,
|
|
50% {
|
|
opacity: 1;
|
|
transform: rotateY(0deg);
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 767px) {
|
|
.ctn-preloader .animation-preloader .spinner {
|
|
height: 8em;
|
|
width: 8em;
|
|
}
|
|
|
|
.ctn-preloader .animation-preloader .txt-loading {
|
|
span {
|
|
font-size: 24px;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 500px) {
|
|
.ctn-preloader .animation-preloader .spinner {
|
|
height: 7em;
|
|
width: 7em;
|
|
}
|
|
|
|
.ctn-preloader .animation-preloader .txt-loading {
|
|
span {
|
|
font-size: 20px;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* ====
|
|
--------- (3.03) preloader styles end ---------
|
|
==== */
|