137 lines
2.2 KiB
CSS
137 lines
2.2 KiB
CSS
.loadingBarPanel{
|
|
|
|
transition: 1s;
|
|
|
|
}
|
|
body {
|
|
-webkit-font-smoothing: antialiased;
|
|
text-rendering: optimizeLegibility;
|
|
font-family: "proxima-nova-soft", sans-serif;
|
|
-webkit-user-select: none;
|
|
overflow: hidden;
|
|
|
|
|
|
}
|
|
body .vertical-centered-box {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
text-align: center;
|
|
}
|
|
body .vertical-centered-box:after {
|
|
content: '';
|
|
display: inline-block;
|
|
height: 100%;
|
|
vertical-align: middle;
|
|
margin-right: -0.25em;
|
|
}
|
|
body .vertical-centered-box .content {
|
|
box-sizing: border-box;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
text-align: left;
|
|
font-size: 0;
|
|
}
|
|
* {
|
|
transition: all 0.3s;
|
|
}
|
|
body {
|
|
|
|
}
|
|
.loader-circle {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
width: 120px;
|
|
height: 120px;
|
|
border-radius: 50%;
|
|
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
|
|
margin-left: -60px;
|
|
margin-top: -60px;
|
|
|
|
}
|
|
.loader-circle-dark {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
width: 120px;
|
|
height: 120px;
|
|
border-radius: 50%;
|
|
box-shadow: inset 0 0 0 1px #ffffff;
|
|
margin-left: -60px;
|
|
margin-top: -60px;
|
|
|
|
}
|
|
|
|
.loader-line-mask {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
width: 60px;
|
|
height: 120px;
|
|
margin-left: -60px;
|
|
margin-top: -60px;
|
|
overflow: hidden;
|
|
transform-origin: 60px 60px;
|
|
-webkit-mask-image: -webkit-linear-gradient(top, #000000, rgba(0, 0, 0, 0));
|
|
animation: rotate 1.2s infinite linear;
|
|
}
|
|
|
|
.loader-line-mask-dark {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
width: 60px;
|
|
height: 120px;
|
|
margin-left: -60px;
|
|
margin-top: -60px;
|
|
overflow: hidden;
|
|
transform-origin: 60px 60px;
|
|
-webkit-mask-image: -webkit-linear-gradient(top, #000000, rgba(0, 0, 0, 0));
|
|
animation: rotate 1.2s infinite linear;
|
|
}
|
|
|
|
|
|
.loader-line {
|
|
width: 120px;
|
|
height: 120px;
|
|
border-radius: 50%;
|
|
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
|
|
}
|
|
|
|
.loader-line-dark {
|
|
width: 120px;
|
|
height: 120px;
|
|
border-radius: 50%;
|
|
box-shadow: inset 0 0 0 1px rgb(38 91 226 / 82%);
|
|
}
|
|
|
|
|
|
@keyframes rotate {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
|
|
|
|
@keyframes fade {
|
|
0% {
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
opacity: 0.25;
|
|
}
|
|
}
|
|
@keyframes fade-in {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|