This commit is contained in:
leejinho 2019-11-25 15:49:02 +09:00
commit 07de37f2d2
2 changed files with 78 additions and 0 deletions

View File

@ -0,0 +1,45 @@
.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-img {
position: absolute;
width: 240px;
height: 120px;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
.credit {
position: absolute;
bottom: 50px;
width: 100%;
font-weight: 500;
text-align: center;
color: #ffffff;
text-transform: uppercase;
text-decoration: none;
}
#plug,
#socket {
fill: #ffffff;
}
#loop-normal {
fill: none;
stroke: #ffffff;
stroke-width: 12;
}
#loop-offset {
display: none;
}

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" class="svg-img">
<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>