create Loading component with pinwheel ko animation
This commit is contained in:
parent
a58c2ed04a
commit
9f5842703b
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 roomsServices from '../../services/api/roomsServices';
|
||||||
import RoomButton from '../../components/Button/Room/Room';
|
import RoomButton from '../../components/Button/Room/Room';
|
||||||
|
|
||||||
|
import Loading from '../../components/Display/Loading/Loading';
|
||||||
|
|
||||||
const Home = props => {
|
const Home = props => {
|
||||||
const state = props.state || {};
|
const state = props.state || {};
|
||||||
|
@ -19,7 +20,7 @@ const Home = props => {
|
||||||
))
|
))
|
||||||
}
|
}
|
||||||
// TODO stub loader
|
// TODO stub loader
|
||||||
return <p className="loading">Loading Component</p>
|
return <Loading />
|
||||||
}
|
}
|
||||||
|
|
||||||
const fetchRoomsAPI = async () => {
|
const fetchRoomsAPI = async () => {
|
||||||
|
|
|
@ -9,6 +9,7 @@ import Message from '../../components/Display/Message/Message';
|
||||||
import ActionError from '../../components/Error/ActionError/ActionError';
|
import ActionError from '../../components/Error/ActionError/ActionError';
|
||||||
|
|
||||||
import Development from '../../components/Display/Development/Development';
|
import Development from '../../components/Display/Development/Development';
|
||||||
|
import Loading from '../../components/Display/Loading/Loading';
|
||||||
|
|
||||||
const Room = (props) => {
|
const Room = (props) => {
|
||||||
const { state, dispatch} = props;
|
const { state, dispatch} = props;
|
||||||
|
@ -60,7 +61,7 @@ const Room = (props) => {
|
||||||
/>
|
/>
|
||||||
))
|
))
|
||||||
}
|
}
|
||||||
return <p>Loading Games...</p>
|
return <Loading />
|
||||||
}
|
}
|
||||||
|
|
||||||
const renderMessages = () => {
|
const renderMessages = () => {
|
||||||
|
@ -73,12 +74,13 @@ const Room = (props) => {
|
||||||
/>
|
/>
|
||||||
))
|
))
|
||||||
}
|
}
|
||||||
return <p>Loading Messages...</p>
|
return <Loading />
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="Room" data-testid="Room">
|
<div className="Room" data-testid="Room">
|
||||||
|
|
||||||
<div className="Room__heading">
|
<div className="Room__heading">
|
||||||
<h2 className="heading--two">{state.currentRoom ? state.currentRoom.name : 'Loading'}</h2>
|
<h2 className="heading--two">{state.currentRoom ? state.currentRoom.name : 'Loading'}</h2>
|
||||||
{/* <span className="Room__connection">{socket ? '✓' : ' ⃠'}</span> */}
|
{/* <span className="Room__connection">{socket ? '✓' : ' ⃠'}</span> */}
|
||||||
|
|
Loading…
Reference in a new issue