로딩이미지 변경
This commit is contained in:
khk
parent
0b04492309
commit
f287a1a3cd
|
|
@ -282,6 +282,10 @@ $daesang-grey: (
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.load-container .loader:after{
|
||||||
|
background: mat-color($accent);
|
||||||
|
}
|
||||||
|
|
||||||
.global-menu {
|
.global-menu {
|
||||||
.mat-tab-label[aria-selected='true'] {
|
.mat-tab-label[aria-selected='true'] {
|
||||||
.mat-tab-label-content {
|
.mat-tab-label-content {
|
||||||
|
|
|
||||||
|
|
@ -1,17 +1,19 @@
|
||||||
.wrapper-splash {
|
.wrapper-splash {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
justify-items: center;
|
||||||
z-index: 99999;
|
z-index: 99999;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background: #eaeff1;
|
/*background: linear-gradient(to top, #93a3af, #eaeff1);*/
|
||||||
background: linear-gradient(to top, #93a3af, #eaeff1);
|
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
.svg-img {
|
/*.svg-img {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 240px;
|
width: 240px;
|
||||||
height: 120px;
|
height: 120px;
|
||||||
|
|
@ -45,4 +47,93 @@
|
||||||
|
|
||||||
#loop-offset {
|
#loop-offset {
|
||||||
display: none;
|
display: none;
|
||||||
|
}*/
|
||||||
|
.load-container {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: column;
|
||||||
|
justify-content: center;
|
||||||
|
justify-items: center;
|
||||||
|
transform: translateY(-60px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.load-container .loader {
|
||||||
|
font-size: 10px;
|
||||||
|
margin: 50px auto;
|
||||||
|
text-indent: -9999em;
|
||||||
|
width: 11em;
|
||||||
|
height: 11em;
|
||||||
|
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, #00b6d5 10%, #fb8c00, 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);
|
||||||
|
}
|
||||||
|
.load-container .loader:before {
|
||||||
|
width: 50%;
|
||||||
|
height: 50%;
|
||||||
|
background: #ffffff;
|
||||||
|
border-radius: 100% 0 0 0;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
content: '';
|
||||||
|
}
|
||||||
|
.load-container .loader:after {
|
||||||
|
width: 75%;
|
||||||
|
height: 75%;
|
||||||
|
border-radius: 50%;
|
||||||
|
content: '';
|
||||||
|
margin: auto;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
.credit {
|
||||||
|
color: #f2f2f2;
|
||||||
|
margin: 0 auto;
|
||||||
|
font-size: 1.2em;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
@-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);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -12,8 +12,8 @@
|
||||||
<body class="theme-default">
|
<body class="theme-default">
|
||||||
<app-root app-version="0.0.1"></app-root>
|
<app-root app-version="0.0.1"></app-root>
|
||||||
|
|
||||||
<div class="wrapper-splash" id="splash-screen">
|
<div class="wrapper-splash bg-accent-color " id="splash-screen">
|
||||||
<svg
|
<!--<svg
|
||||||
version="1.1"
|
version="1.1"
|
||||||
id="preloader"
|
id="preloader"
|
||||||
x="0px"
|
x="0px"
|
||||||
|
|
@ -89,8 +89,11 @@
|
||||||
>
|
>
|
||||||
<mpath xlink:href="#loop-offset" />
|
<mpath xlink:href="#loop-offset" />
|
||||||
</animateMotion>
|
</animateMotion>
|
||||||
</svg>
|
</svg>-->
|
||||||
<div class="credit">Welcome to DS Talk</div>
|
<div class="load-container">
|
||||||
|
<div class="loader"></div>
|
||||||
|
<span class="credit">Welcome to DS Talk</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user