feat(overlayLoader): Add OverlayLoader
parent
919cd693d1
commit
3b74a20910
|
@ -0,0 +1,62 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import styles from './overlayLoader-styles';
|
||||
|
||||
function LoaderCircle({ delay, origin }, i) {
|
||||
return (
|
||||
<circle
|
||||
className='innerCircle'
|
||||
cx='50%'
|
||||
cy='50%'
|
||||
fill='transparent'
|
||||
key={ i }
|
||||
r='5%'
|
||||
stroke='#006400'
|
||||
strokeWidth='3'
|
||||
style={{ animationDelay: '' + delay, transformOrigin: '' + origin }}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
LoaderCircle.propTypes = {
|
||||
delay: PropTypes.string.isRequired,
|
||||
origin: PropTypes.string.isRequired
|
||||
};
|
||||
LoaderCircle.displayName = 'LoaderCircle';
|
||||
|
||||
const animationProps = [
|
||||
{
|
||||
delay: '-1.5s',
|
||||
origin: '1% 1%'
|
||||
},
|
||||
{
|
||||
delay: '-1s',
|
||||
origin: '1% 99%'
|
||||
},
|
||||
{
|
||||
delay: '-0.5s',
|
||||
origin: '99% 1%'
|
||||
},
|
||||
{
|
||||
delay: '0s',
|
||||
origin: '99% 99%'
|
||||
}
|
||||
];
|
||||
|
||||
function OverlayLoader() {
|
||||
return (
|
||||
<div className='svg-container'>
|
||||
<style dangerouslySetInnerHTML={{ __html: styles }} />
|
||||
<svg className='svg' height='100%' width='100%'>
|
||||
{
|
||||
animationProps.map(LoaderCircle)
|
||||
}
|
||||
</svg>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
OverlayLoader.displayName = 'OverlayLoader';
|
||||
|
||||
export default OverlayLoader;
|
|
@ -1,4 +1,5 @@
|
|||
export { default as FullWidthRow } from './FullWidthRow.jsx';
|
||||
export { default as Loader } from './Loader.jsx';
|
||||
export { default as OverlayLoader } from './OverlayLoader.jsx';
|
||||
export { default as Spacer } from './Spacer.jsx';
|
||||
export { default as ButtonSpacer } from './ButtonSpacer.jsx';
|
||||
|
|
|
@ -0,0 +1,68 @@
|
|||
export default `
|
||||
|
||||
.svg-container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index:5;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-box-align:center;
|
||||
-ms-flex-align:center;
|
||||
align-items:center;
|
||||
}
|
||||
|
||||
.svg-container + div {
|
||||
-webkit-filter: blur(5px);
|
||||
filter: blur(5px);
|
||||
}
|
||||
|
||||
@-webkit-keyframes overlay-loader {
|
||||
0% {
|
||||
-webkit-transform: scale(0.1);
|
||||
transform: scale(0.1);
|
||||
opacity: 0;
|
||||
}
|
||||
70% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0.0;
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes overlay-loader {
|
||||
0% {
|
||||
-webkit-transform: scale(0.1);
|
||||
transform: scale(0.1);
|
||||
opacity: 0;
|
||||
}
|
||||
70% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0.0;
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.innerCircle {
|
||||
-webkit-animation-duration: 2s;
|
||||
animation-duration: 2s;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
-webkit-animation-name: overlay-loader;
|
||||
animation-name: overlay-loader;
|
||||
-webkit-animation-timing-function: ease-out;
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
|
||||
`;
|
Loading…
Reference in New Issue