mirror of
https://github.com/ragestudio/comty.git
synced 2025-06-09 10:34:17 +00:00
added splash loader
This commit is contained in:
srgooglo
parent
03709378f3
commit
636eaaaf83
50
src/components/Splash/index.js
Normal file
50
src/components/Splash/index.js
Normal file
@ -0,0 +1,50 @@
|
||||
import React from 'react'
|
||||
import classnames from 'classnames'
|
||||
import './index.less'
|
||||
import styles from './index.less'
|
||||
|
||||
export default class AppSplash extends React.Component {
|
||||
render() {
|
||||
console.log(this.props.fadeout)
|
||||
return (
|
||||
<div className={classnames(styles.wrapper, {[styles.fadeout]: this.props.fadeout})} style={this.props.fadeout? { animationDuration: `${this.props.fadeout}ms` } : null} >
|
||||
<div className="bouncy-logo">
|
||||
<div className="ball">
|
||||
<svg viewBox="0 0 100 120">
|
||||
<path
|
||||
d="M77.55 29.69L92 18.78a1.42 1.42 0 00.25-2 39.2 39.2 0 00-56.31-4.21A38.05 38.05 0 0023.23 42a38.09 38.09 0 003.62 15.1A38.65 38.65 0 0037.8 70.84 39.46 39.46 0 0083.37 73a38.26 38.26 0 008.41-7.4 1.41 1.41 0 00-.23-2L77.65 53a1.43 1.43 0 00-1.9.15 17 17 0 01-3.2 2.85 17.75 17.75 0 01-9 2.88c-8.32.31-13.62-5.69-14-6.13a17.68 17.68 0 01-4.13-10.13 17.93 17.93 0 014.56-13 17.46 17.46 0 0121.72-3.28 17.3 17.3 0 014 3.2 1.41 1.41 0 001.85.15z"
|
||||
style={{
|
||||
backdropFilter: "blur(2px)",
|
||||
}}
|
||||
fill="rgba(51,51,51,.45)"
|
||||
/>
|
||||
<path
|
||||
d="M13 63.17a2.77 2.77 0 013.75 1.43 48.38 48.38 0 0015.32 19.93 48.83 48.83 0 0020.27 8.77 47.37 47.37 0 0040.23-11.5 2.77 2.77 0 014 .3l6.23 7.4a2.79 2.79 0 01-.21 3.83 63.83 63.83 0 01-6 5 62.21 62.21 0 01-7.44 4.7A60.84 60.84 0 0177 108a62.3 62.3 0 01-27 1.51 62.51 62.51 0 01-9.82-2.51A61.5 61.5 0 0120.1 95.69 61.73 61.73 0 012.41 71a2.79 2.79 0 011.42-3.55z"
|
||||
style={{
|
||||
backdropFilter: "blur(2px)",
|
||||
}}
|
||||
fill="rgba(51,51,51,.45)"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div className="shadow"><div className="ball-shadow"></div></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export class AppSplash2 extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<div className="c-logo js-logo is-small">
|
||||
<svg className="c-logo__svg" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" viewBox="0 0 248.59 29.29">
|
||||
<g>
|
||||
<polygon className="c-logo__svg-item c-logo__svg-item--arrow" points="248.59 16.72 233.28 7.36 233.28 11.4 243.69 18.3 233.28 25.2 233.28 29.25 248.59 19.95 248.59 16.72" />
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
172
src/components/Splash/index.less
Normal file
172
src/components/Splash/index.less
Normal file
@ -0,0 +1,172 @@
|
||||
.wrapper {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
background-color: #efefef;
|
||||
color: #2d2d2d;
|
||||
border-radius: 12px;
|
||||
text-align: center;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
animation-duration: 1500ms;
|
||||
|
||||
&.fadeout{
|
||||
opacity: 0;
|
||||
animation-name: out;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
}
|
||||
|
||||
.bouncy-logo{
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.bouncy-logo .ball {
|
||||
height: auto;
|
||||
width: 100%;
|
||||
transform: translate(-10px, 0);
|
||||
}
|
||||
|
||||
.bouncy-logo .ball svg {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
margin: auto;
|
||||
|
||||
-webkit-animation-direction: alternate;
|
||||
-webkit-animation-duration: 1s;
|
||||
-webkit-animation-name: my-bounce;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
animation-direction: alternate;
|
||||
animation-duration: 1s;
|
||||
animation-name: my-bounce;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.shadow{
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.bouncy-logo .ball-shadow {
|
||||
margin: auto;
|
||||
background: radial-gradient(50% 50%, rgba(204, 204, 204, 0.45) 0%, transparent 100%);
|
||||
height: 50px;
|
||||
width: 200px;
|
||||
-webkit-animation-direction: alternate;
|
||||
-webkit-animation-duration: 1s;
|
||||
-webkit-animation-name: my-grow;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
animation-direction: alternate;
|
||||
animation-duration: 1s;
|
||||
animation-name: my-grow;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
@-webkit-keyframes my-grow {
|
||||
from {
|
||||
width: 200px;
|
||||
height: 50px;
|
||||
}
|
||||
to {
|
||||
width: 150px;
|
||||
height: 10px;
|
||||
}
|
||||
}
|
||||
@keyframes my-grow {
|
||||
from {
|
||||
width: 200px;
|
||||
height: 50px;
|
||||
}
|
||||
to {
|
||||
width: 150px;
|
||||
height: 10px;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes my-bounce {
|
||||
from {
|
||||
top: 0;
|
||||
}
|
||||
to {
|
||||
top: 10%;
|
||||
}
|
||||
}
|
||||
@keyframes my-bounce {
|
||||
from {
|
||||
top: 0;
|
||||
}
|
||||
to {
|
||||
top: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.c-logo{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
|
||||
&__svg{
|
||||
width: 280px;
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
margin: 0px;
|
||||
position: relative;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
&__svg-item{
|
||||
fill: #242424;
|
||||
transition: all 0.3s ease-in-out 0s;
|
||||
|
||||
&--text{
|
||||
transition: all 0.2s ease-in-out 0.2s;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
&--arrow{
|
||||
transition: all 0.36s ease-in-out 0s;
|
||||
animation-name: Load;
|
||||
animation-duration: 2s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@keyframes Load {
|
||||
0% {
|
||||
transform: translateX(0px);
|
||||
transition-delay: 0s;
|
||||
}
|
||||
50%{
|
||||
transform: translateX(-171px);
|
||||
transition-delay: 0s;
|
||||
}
|
||||
100% {
|
||||
transform: translateX(0px);
|
||||
transition-delay: 0s;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes out {
|
||||
0% {
|
||||
opacity: 100%;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@ -8,6 +8,7 @@ import * as Feather from 'feather-reactjs'
|
||||
import Invalid from './Invalid'
|
||||
|
||||
// App Layout Components
|
||||
import Splash from './Splash'
|
||||
import * as AppLayout from './Layout/index.js'
|
||||
import ListedMenu from './ListedMenu/index.tsx'
|
||||
import FloatComponent from './FloatComponent'
|
||||
@ -22,6 +23,7 @@ import PostCard from './PostCard'
|
||||
|
||||
// Mix & Export all
|
||||
export {
|
||||
Splash,
|
||||
ParamsList,
|
||||
FloatComponent,
|
||||
ListedMenu,
|
||||
|
||||
@ -7,6 +7,7 @@ import { withRouter, connect } from 'umi'
|
||||
import { queryLayout } from 'core'
|
||||
import WindowNavbar from 'components/Layout/WindowNavbar'
|
||||
import config from 'config'
|
||||
import { Splash } from 'components'
|
||||
|
||||
import PrimaryLayout from './PrimaryLayout'
|
||||
import PublicLayout from './PublicLayout'
|
||||
@ -39,12 +40,8 @@ class BaseLayout extends React.Component {
|
||||
this.renderLoading = false
|
||||
}
|
||||
|
||||
if (app.abortRender) {
|
||||
return(
|
||||
<div>
|
||||
{app.abortRender}
|
||||
</div>
|
||||
)
|
||||
if (app.splash.render) {
|
||||
return <Splash fadeout={app.splash.fadeout} />
|
||||
}
|
||||
|
||||
return (
|
||||
|
||||
@ -1,17 +0,0 @@
|
||||
import React from 'react'
|
||||
import verbosity from 'core/libs/verbosity'
|
||||
import handle from 'core/libs/errorhandler'
|
||||
import { notify } from 'core/libs/appInterface'
|
||||
import settings from 'core/libs/settings'
|
||||
import endpoints from 'config/endpoints'
|
||||
import { v3_model } from 'core/libs'
|
||||
|
||||
export default class LoadLayout extends React.Component{
|
||||
render(){
|
||||
return(
|
||||
<div>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
@ -1,7 +1,6 @@
|
||||
import React from 'react'
|
||||
import BaseLayout from './BaseLayout'
|
||||
import { withRouter } from 'umi'
|
||||
const appBody = document.getElementsByTagName("body")[0]
|
||||
|
||||
@withRouter
|
||||
class Layout extends React.Component {
|
||||
|
||||
@ -13,6 +13,12 @@ import cookie from 'cookie_js'
|
||||
export default {
|
||||
namespace: 'app',
|
||||
state: {
|
||||
fadeclock: 1000,
|
||||
splash: {
|
||||
render: true,
|
||||
fadeout: false
|
||||
},
|
||||
queryDone: false,
|
||||
env_proccess: process.env,
|
||||
server_key: keys.server_key,
|
||||
|
||||
@ -102,6 +108,12 @@ export default {
|
||||
], (callback) => {
|
||||
window.location = callback
|
||||
})
|
||||
|
||||
state.dispatcher({ type: "updateState", payload: { queryDone: true, splash: { render: true, fadeout: state.fadeclock } } })
|
||||
setTimeout(() => {
|
||||
console.log("closing splash")
|
||||
state.dispatcher({ type: "updateState", payload: { splash: { render: false, fadeout: false } } })
|
||||
}, state.fadeclock)
|
||||
},
|
||||
*initHeaderSocket({ callback }, { call, put, select }) {
|
||||
const state = yield select(state => state.app)
|
||||
|
||||
@ -1,26 +0,0 @@
|
||||
import React from 'react'
|
||||
import * as antd from 'antd'
|
||||
import { connect } from 'umi'
|
||||
import './index.less'
|
||||
|
||||
@connect(({ app }) => ({ app }))
|
||||
export default class AppSplash extends React.Component {
|
||||
componentDidMount() {
|
||||
setTimeout(() => {
|
||||
document.querySelector(".js-logo").classList.remove("is-small")
|
||||
}, 1200)
|
||||
}
|
||||
//c-logo__svg-item c-logo__svg-item--out
|
||||
render() {
|
||||
return (
|
||||
<div className="c-logo js-logo is-small">
|
||||
<svg className="c-logo__svg" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" viewBox="0 0 248.59 29.29">
|
||||
<g>
|
||||
|
||||
<polygon className="c-logo__svg-item c-logo__svg-item--move" points="248.59 16.72 233.28 7.36 233.28 11.4 243.69 18.3 233.28 25.2 233.28 29.25 248.59 19.95 248.59 16.72" />
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
@ -1,53 +0,0 @@
|
||||
.c-logo{
|
||||
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 2;
|
||||
|
||||
&__svg{
|
||||
width: 280px;
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
margin: 0px;
|
||||
position: relative;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
&__svg-item{
|
||||
fill: #242424;
|
||||
transition: all 0.3s ease-in-out 0s;
|
||||
|
||||
&--out{
|
||||
transition: all 0.2s ease-in-out 0.2s;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
|
||||
.is-small &{
|
||||
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition-delay: 0s;
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&--move{
|
||||
|
||||
transition: all 0.36s ease-in-out 0s;
|
||||
|
||||
.is-small &{
|
||||
|
||||
transform: translateX(-171px);
|
||||
transition-delay: 0s;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user