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 2019-11-25 15:23:52 +09:00
parent 81f871bea3
commit 4e47dd6855
2 changed files with 76 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
projects/ucap-webmessenger-app/src/assets/scss/partials/splash.css Normal file
View File

@ -0,0 +1,43 @@
body{
margin:0;
padding:0;
width: 100%;
height: 100%;
}
.wrapper-splash {
width: 100%;
height:100%;
background-size: cover;
height: 100%;
background: #eaeff1;
background: linear-gradient(to top, #93a3af, #eaeff1);
margin:0;
padding:0;
}
svg {
position: absolute;
width: 240px;
height: 120px;
top: 0; right: 0;
bottom: 0; left: 0;
margin: auto;
}
.credit {
position: absolute;
bottom: 50px;
width: 100%;
text-align: center;
}
.credit {
color: #ffffff;
font: 800 100% "Open Sans", sans-serif;
text-transform: uppercase;
text-decoration: none;
}
#plug,
#socket { fill:#ffffff }
#loop-normal { fill: none; stroke: #ffffff; stroke-width: 12 }
#loop-offset { display: none }

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

@ -7,8 +7,41 @@
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="favicon.ico" /> <link rel="icon" type="image/x-icon" href="favicon.ico" />
<link href="assets/images/icons/material/style.css" rel="stylesheet" /> <link href="assets/images/icons/material/style.css" rel="stylesheet" />
<link href="assets/scss/partials/splash.css" rel="stylesheet" />
</head> </head>
<body class="theme-default"> <body class="theme-default">
<app-root></app-root> <app-root></app-root>
<div class="wrapper-splash">
<svg version="1.1" id="preloader" x="0px" y="0px" width="240px" height="120px" viewBox="0 0 240 120">
<path id="loop-normal" class="st1" d="M120.5,60.5L146.48,87.02c14.64,14.64,38.39,14.65,53.03,0s14.64-38.39,0-53.03s-38.39-14.65-53.03,0L120.5,60.5
L94.52,87.02c-14.64,14.64-38.39,14.64-53.03,0c-14.64-14.64-14.64-38.39,0-53.03c14.65-14.64,38.39-14.65,53.03,0z">
<animate attributeName="stroke-dasharray" attributeType="XML" from="500, 50" to="450 50" begin="0s" dur="2s"
repeatCount="indefinite" />
<animate attributeName="stroke-dashoffset" attributeType="XML" from="-40" to="-540" begin="0s" dur="2s"
repeatCount="indefinite" />
</path>
<path id="loop-offset" d="M146.48,87.02c14.64,14.64,38.39,14.65,53.03,0s14.64-38.39,0-53.03s-38.39-14.65-53.03,0L120.5,60.5
L94.52,87.02c-14.64,14.64-38.39,14.64-53.03,0c-14.64-14.64-14.64-38.39,0-53.03c14.65-14.64,38.39-14.65,53.03,0L120.5,60.5
L146.48,87.02z" />
<path id="socket" d="M7.5,0c0,8.28-6.72,15-15,15l0-30C0.78-15,7.5-8.28,7.5,0z" />
<path id="plug" d="M0,9l15,0l0-5H0v-8.5l15,0l0-5H0V-15c-8.29,0-15,6.71-15,15c0,8.28,6.71,15,15,15V9z" />
<animateMotion xlink:href="#plug" dur="2s" rotate="auto" repeatCount="indefinite" calcMode="linear" keyTimes="0;1"
keySplines="0.42, 0, 0.58, 1">
<mpath xlink:href="#loop-normal" />
</animateMotion>
<animateMotion xlink:href="#socket" dur="2s" rotate="auto" repeatCount="indefinite" calcMode="linear" keyTimes="0;1"
keySplines="0.42, 0, 0.58, 1">
<mpath xlink:href="#loop-offset" />
</animateMotion>
</svg>
<div class="credit">Welcome to M-Messenger</div>
</div>
</body> </body>
</html> </html>