priyatham
/
Locaft
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

error page animation

This commit is contained in:
Priyatham Sai Chand 2021-01-25 13:52:44 +05:30
parent be5004c1e0
commit 9559d40106
2 changed files with 32 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/components/Error404.js
View File

@ -1,28 +1,50 @@
import React from 'react'; import React from 'react';
import { Link } from 'react-router-dom' import { Link } from 'react-router-dom'
import styled from 'styled-components'; import styled from 'styled-components';
import Lottie from 'react-lottie';
import animationData from '../lottie/box_error';
const Body = styled.div` const Body = styled.div`
@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,300,500); @import url(https://fonts.googleapis.com/css?family=Roboto:400,100,300,500);
background-color: #fff;
font-size: 100%; font-size: 100%;
line-height: 1.5; line-height: 1.5;
font-family: "Roboto", sans-serif; font-family: "Roboto", sans-serif;
display:flex;
justify-content: center;
align-items: center;
`;
const Container = styled.div`
position: relative;
background-color: #66bfbf;
text-align: center;
`; `;
const Heading = styled.h1` const Heading = styled.h1`
text-align: center; padding-top: 15%;
color: #000; color: white;
font-size: 4rem;
`; `;
const defaultOptions = {
loop: true,
autoplay: true,
animationData: animationData,
rendererSettings: {
preserveAspectRatio: "xMidYMid slice"
}
};
const Error404 = () => { const Error404 = () => {
return ( return (
<Body> <Body>
<Heading>Error 404</Heading> <Container>
<Heading>Error </Heading>
<br />
<Lottie height={500} width={500} options={defaultOptions} />
</Container>

1
src/lottie/box_error.json Normal file
View File

File diff suppressed because one or more lines are too long