Initial Commit Rework

This commit is contained in:
Qstick 2017-09-03 22:20:56 -04:00
parent 74a4cc048c
commit 95051cbd63
2483 changed files with 101351 additions and 111396 deletions

View file

@ -0,0 +1,65 @@
.loading {
margin-top: 20px;
text-align: center;
}
.rippleContainer {
position: relative;
display: inline-block;
}
.ripple:nth-child(0) {
animation-delay: -0.8s;
}
.ripple:nth-child(1) {
animation-delay: -0.6s;
}
.ripple:nth-child(2) {
animation-delay: -0.4s;
}
.ripple:nth-child(3) {
animation-delay: -0.2s;
}
.ripple {
position: absolute;
border: 2px solid #3a3f51;
border-radius: 100%;
animation-fill-mode: both;
animation: rippleContainer 1.25s 0s infinite cubic-bezier(0.21, 0.53, 0.56, 0.8);
}
@-webkit-keyframes rippleContainer {
0% {
opacity: 1;
transform: scale(0.1);
}
70% {
opacity: 0.7;
transform: scale(1);
}
100% {
opacity: 0;
}
}
@keyframes rippleContainer {
0% {
opacity: 1;
transform: scale(0.1);
}
70% {
opacity: 0.7;
transform: scale(1);
}
100% {
opacity: 0;
}
}

View file

@ -0,0 +1,48 @@
import PropTypes from 'prop-types';
import React from 'react';
import styles from './LoadingIndicator.css';
function LoadingIndicator({ className, size }) {
const sizeInPx = `${size}px`;
const width = sizeInPx;
const height = sizeInPx;
return (
<div
className={className}
style={{ height }}
>
<div
className={styles.rippleContainer}
style={{ width, height }}
>
<div
className={styles.ripple}
style={{ width, height }}
/>
<div
className={styles.ripple}
style={{ width, height }}
/>
<div
className={styles.ripple}
style={{ width, height }}
/>
</div>
</div>
);
}
LoadingIndicator.propTypes = {
className: PropTypes.string,
size: PropTypes.number
};
LoadingIndicator.defaultProps = {
className: styles.loading,
size: 50
};
export default LoadingIndicator;

View file

@ -0,0 +1,6 @@
.loadingMessage {
margin: 50px 10px 0;
text-align: center;
font-weight: 300;
font-size: 36px;
}

View file

@ -0,0 +1,36 @@
import React from 'react';
import styles from './LoadingMessage.css';
const messages = [
'Downloading more RAM',
'Now in Technicolor',
'Previously on Sonarr...',
'Bleep Bloop.',
'Locating the required gigapixels to render...',
'Spinning up the hamster wheel...',
'At least you\'re not on hold',
'Hum something loud while others stare',
'Loading humorous message... Please Wait',
'I could\'ve been faster in Python',
'Don\'t forget to rewind your episodes',
'Congratulations! you are the 1000th visitor.',
'HELP!, I\'m being held hostage and forced to write these stupid lines!',
'RE-calibrating the internet...',
'I\'ll be here all week',
'Don\'t forget to tip your waitress',
'Apply directly to the forehead',
'Loading Battlestation'
];
function LoadingMessage() {
const index = Math.floor(Math.random() * messages.length);
const message = messages[index];
return (
<div className={styles.loadingMessage}>
{message}
</div>
);
}
export default LoadingMessage;