ucap/next-ucap-messenger
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

로딩이미지 변경

Browse Source
This commit is contained in:
khk 2020-01-08 15:40:06 +09:00
parent 0b04492309
commit f287a1a3cd
3 changed files with 105 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss
View File

@ -282,6 +282,10 @@ $daesang-grey: (
}
}
.load-container .loader:after{
background: mat-color($accent);
}
.global-menu {
.mat-tab-label[aria-selected='true'] {
.mat-tab-label-content {

97
projects/ucap-webmessenger-app/src/assets/scss/partials/splash.css
View File

@ -1,17 +1,19 @@
.wrapper-splash {
position: absolute;
display: flex;
justify-content: center;
justify-items: center;
z-index: 99999;
width: 100%;
height: 100%;
pointer-events: none;
background-size: cover;
height: 100%;
background: #eaeff1;
background: linear-gradient(to top, #93a3af, #eaeff1);
/*background: linear-gradient(to top, #93a3af, #eaeff1);*/
margin: 0;
padding: 0;
}
.svg-img {
/*.svg-img {
position: absolute;
width: 240px;
height: 120px;
@ -45,4 +47,93 @@
#loop-offset {
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);
}
}

11
projects/ucap-webmessenger-app/src/index.html
View File

@ -12,8 +12,8 @@
<body class="theme-default">
<app-root app-version="0.0.1"></app-root>
<div class="wrapper-splash" id="splash-screen">
<svg
<div class="wrapper-splash bg-accent-color " id="splash-screen">
<!--<svg
version="1.1"
id="preloader"
x="0px"
@ -89,8 +89,11 @@
>
<mpath xlink:href="#loop-offset" />
</animateMotion>
</svg>
<div class="credit">Welcome to DS Talk</div>
</svg>-->
<div class="load-container">
<div class="loader"></div>
<span class="credit">Welcome to DS Talk</span>
</div>
</div>
</body>
</html>