create Loading component with pinwheel ko animation
This commit is contained in:
parent
261b5c5bbe
commit
025aee43c8
4 changed files with 269 additions and 3 deletions
|
@ -0,0 +1,80 @@
|
|||
import React from 'react';
|
||||
import './Loading.scss';
|
||||
|
||||
const Loading = () => {
|
||||
return (
|
||||
<div
|
||||
className="Loading"
|
||||
>
|
||||
<div
|
||||
className="point"
|
||||
id="a-1"
|
||||
></div>
|
||||
<div
|
||||
className="point"
|
||||
id="a-2"
|
||||
></div>
|
||||
<div
|
||||
className="point"
|
||||
id="a-3"
|
||||
></div>
|
||||
<div
|
||||
className="point"
|
||||
id="a-4"
|
||||
></div>
|
||||
|
||||
<div
|
||||
className="point"
|
||||
id="b-1"
|
||||
></div>
|
||||
<div
|
||||
className="point"
|
||||
id="b-2"
|
||||
></div>
|
||||
<div
|
||||
className="point"
|
||||
id="b-3"
|
||||
></div>
|
||||
<div
|
||||
className="point"
|
||||
id="b-4"
|
||||
></div>
|
||||
|
||||
<div
|
||||
className="point"
|
||||
id="c-1"
|
||||
></div>
|
||||
<div
|
||||
className="point"
|
||||
id="c-2"
|
||||
></div>
|
||||
<div
|
||||
className="point"
|
||||
id="c-3"
|
||||
></div>
|
||||
<div
|
||||
className="point"
|
||||
id="c-4"
|
||||
></div>
|
||||
|
||||
<div
|
||||
className="point"
|
||||
id="d-1"
|
||||
></div>
|
||||
<div
|
||||
className="point"
|
||||
id="d-2"
|
||||
></div>
|
||||
<div
|
||||
className="point"
|
||||
id="d-3"
|
||||
></div>
|
||||
<div
|
||||
className="point"
|
||||
id="d-4"
|
||||
></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Loading;
|
|
@ -0,0 +1,183 @@
|
|||
div.Loading {
|
||||
background-color: rgb(234, 178, 78);
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
height: 6vw;
|
||||
width: 6vw;
|
||||
|
||||
div.point {
|
||||
height: 1vw;
|
||||
width: 1vw;
|
||||
border-radius: 50%;
|
||||
padding: 0.25vw;
|
||||
}
|
||||
|
||||
#a-1 {
|
||||
animation-name: white-stone--corner;
|
||||
animation-duration: 4s;
|
||||
animation-delay: -2.75s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
#a-2 {
|
||||
background-color: black;
|
||||
animation-name: black-stone;
|
||||
animation-duration: 4s;
|
||||
animation-delay: -1s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
#a-3 {
|
||||
background-color: white;
|
||||
animation-name: white-stone;
|
||||
animation-duration: 4s;
|
||||
animation-delay: -2.25s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
#a-4 {
|
||||
animation-name: black-stone--corner;
|
||||
animation-duration: 4s;
|
||||
animation-delay: 0s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
#b-1 {
|
||||
background-color: black;
|
||||
animation-name: black-stone;
|
||||
animation-duration: 4s;
|
||||
animation-delay: -1.5s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
#b-2 {
|
||||
animation-name: white-stone--center;
|
||||
animation-duration: 4s;
|
||||
animation-delay: -3.25s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
#b-3 {
|
||||
background-color: black;
|
||||
animation-name: black-stone--center;
|
||||
animation-duration: 4s;
|
||||
animation-delay: -.5s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
#b-4 {
|
||||
background-color: white;
|
||||
animation-name: white-stone;
|
||||
animation-duration: 4s;
|
||||
animation-delay: -1.75s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
#c-1 {
|
||||
animation-name: white-stone;
|
||||
animation-duration: 4s;
|
||||
animation-delay: -3.75s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
#c-2 {
|
||||
background-color: black;
|
||||
animation-name: black-stone--center;
|
||||
animation-duration: 4s;
|
||||
animation-delay: -2.5s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
#c-3 {
|
||||
background-color: white;
|
||||
animation-name: white-stone--center;
|
||||
animation-duration: 4s;
|
||||
animation-delay: -1.25s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
#c-4 {
|
||||
animation-name: black-stone;
|
||||
animation-duration: 4s;
|
||||
animation-delay: -3.5s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
#d-1 {
|
||||
background-color: black;
|
||||
animation-name: black-stone--corner;
|
||||
animation-duration: 4s;
|
||||
animation-delay: -2s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
#d-2 {
|
||||
background-color: white;
|
||||
animation-name: white-stone;
|
||||
animation-duration: 4s;
|
||||
animation-delay: -.25s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
#d-3 {
|
||||
animation-name: black-stone;
|
||||
animation-duration: 4s;
|
||||
animation-delay: -3s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
#d-4 {
|
||||
background-color: white;
|
||||
animation-name: white-stone--corner;
|
||||
animation-duration: 4s;
|
||||
animation-delay: -.75s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@keyframes black-stone {
|
||||
0% {background: black;}
|
||||
67.5% {background: black;}
|
||||
70% {background: repeating-linear-gradient(0deg, transparent 0%, transparent 45%, black 50%, transparent 55%, transparent 100%),
|
||||
repeating-linear-gradient(90deg, transparent 0%, transparent 45%, black 50%, transparent 55%, transparent 100%);}
|
||||
99.5% {background: repeating-linear-gradient(0deg, transparent 0%, transparent 45%, black 50%, transparent 55%, transparent 100%),
|
||||
repeating-linear-gradient(90deg, transparent 0%, transparent 45%, black 50%, transparent 55%, transparent 100%);}
|
||||
}
|
||||
|
||||
@keyframes white-stone {
|
||||
0% {background: white;}
|
||||
60% {background: white;}
|
||||
62.5% {background: repeating-linear-gradient(0deg, transparent 0%, transparent 45%, black 50%, transparent 55%, transparent 100%),
|
||||
repeating-linear-gradient(90deg, transparent 0%, transparent 45%, black 50%, transparent 55%, transparent 100%);}
|
||||
92.5% {background: repeating-linear-gradient(0deg, transparent 0%, transparent 45%, black 50%, transparent 55%, transparent 100%),
|
||||
repeating-linear-gradient(90deg, transparent 0%, transparent 45%, black 50%, transparent 55%, transparent 100%);}
|
||||
95% {background: white;}
|
||||
}
|
||||
|
||||
@keyframes black-stone--corner {
|
||||
0% {background: black;}
|
||||
52.5% {background: black;};
|
||||
55% {background: repeating-linear-gradient(0deg, transparent 0%, transparent 45%, black 50%, transparent 55%, transparent 100%),
|
||||
repeating-linear-gradient(90deg, transparent 0%, transparent 45%, black 50%, transparent 55%, transparent 100%);};
|
||||
99% {background: repeating-linear-gradient(0deg, transparent 0%, transparent 45%, black 50%, transparent 55%, transparent 100%),
|
||||
repeating-linear-gradient(90deg, transparent 0%, transparent 45%, black 50%, transparent 55%, transparent 100%);};
|
||||
}
|
||||
|
||||
@keyframes white-stone--corner {
|
||||
0% {background: white;}
|
||||
47.5% {background: white;};
|
||||
50% {background: repeating-linear-gradient(0deg, transparent 0%, transparent 45%, black 50%, transparent 55%, transparent 100%),
|
||||
repeating-linear-gradient(90deg, transparent 0%, transparent 45%, black 50%, transparent 55%, transparent 100%);};
|
||||
95% {background: repeating-linear-gradient(0deg, transparent 0%, transparent 45%, black 50%, transparent 55%, transparent 100%),
|
||||
repeating-linear-gradient(90deg, transparent 0%, transparent 45%, black 50%, transparent 55%, transparent 100%);};
|
||||
97.5% {background: white;}
|
||||
}
|
||||
|
||||
@keyframes black-stone--center {
|
||||
0% {background: black;}
|
||||
75.5% {background: black;};
|
||||
77.5% {background: repeating-linear-gradient(0deg, transparent 0%, transparent 45%, black 50%, transparent 55%, transparent 100%),
|
||||
repeating-linear-gradient(90deg, transparent 0%, transparent 45%, black 50%, transparent 55%, transparent 100%);};
|
||||
99% {background: repeating-linear-gradient(0deg, transparent 0%, transparent 45%, black 50%, transparent 55%, transparent 100%),
|
||||
repeating-linear-gradient(90deg, transparent 0%, transparent 45%, black 50%, transparent 55%, transparent 100%);};
|
||||
}
|
||||
|
||||
@keyframes white-stone--center {
|
||||
0% {background: white;}
|
||||
72.5% {background: white;};
|
||||
75% {background: repeating-linear-gradient(0deg, transparent 0%, transparent 45%, black 50%, transparent 55%, transparent 100%),
|
||||
repeating-linear-gradient(90deg, transparent 0%, transparent 45%, black 50%, transparent 55%, transparent 100%);};
|
||||
97.5% {background: repeating-linear-gradient(0deg, transparent 0%, transparent 45%, black 50%, transparent 55%, transparent 100%),
|
||||
repeating-linear-gradient(90deg, transparent 0%, transparent 45%, black 50%, transparent 55%, transparent 100%);};
|
||||
100% {background: white;}
|
||||
}
|
||||
|
|
@ -3,6 +3,7 @@ import './Home.scss';
|
|||
import roomsServices from '../../services/api/roomsServices';
|
||||
import RoomButton from '../../components/Button/Room/Room';
|
||||
|
||||
import Loading from '../../components/Display/Loading/Loading';
|
||||
|
||||
const Home = props => {
|
||||
const state = props.state || {};
|
||||
|
@ -19,7 +20,7 @@ const Home = props => {
|
|||
))
|
||||
}
|
||||
// TODO stub loader
|
||||
return <p className="loading">Loading Component</p>
|
||||
return <Loading />
|
||||
}
|
||||
|
||||
const fetchRoomsAPI = async () => {
|
||||
|
|
|
@ -9,6 +9,7 @@ import Message from '../../components/Display/Message/Message';
|
|||
import ActionError from '../../components/Error/ActionError/ActionError';
|
||||
|
||||
import Development from '../../components/Display/Development/Development';
|
||||
import Loading from '../../components/Display/Loading/Loading';
|
||||
|
||||
const Room = (props) => {
|
||||
const { state, dispatch} = props;
|
||||
|
@ -60,7 +61,7 @@ const Room = (props) => {
|
|||
/>
|
||||
))
|
||||
}
|
||||
return <p>Loading Games...</p>
|
||||
return <Loading />
|
||||
}
|
||||
|
||||
const renderMessages = () => {
|
||||
|
@ -73,12 +74,13 @@ const Room = (props) => {
|
|||
/>
|
||||
))
|
||||
}
|
||||
return <p>Loading Messages...</p>
|
||||
return <Loading />
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<div className="Room" data-testid="Room">
|
||||
|
||||
<div className="Room__heading">
|
||||
<h2 className="heading--two">{state.currentRoom ? state.currentRoom.name : 'Loading'}</h2>
|
||||
{/* <span className="Room__connection">{socket ? '✓' : ' ⃠'}</span> */}
|
||||
|
|
Loading…
Reference in a new issue