oxaliq/node-go
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

create Loading component with pinwheel ko animation

Browse source
This commit is contained in:
Sorrel Bri 2020-01-29 00:17:32 -08:00
parent 0f02cc4cfc
commit 572c4241f9
4 changed files with 269 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

80
play-node-go/src/components/Display/Loading/Loading.js Normal file
View file

@ -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;

183
play-node-go/src/components/Display/Loading/Loading.scss Normal file
View file

@ -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
play-node-go/src/pages/Home/Home.js
View file

@ -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 () => {

6
play-node-go/src/pages/Room/Room.js
View file

@ -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> */}