├── .gitignore
├── README.md
├── package.json
├── public
└── index.html
├── screenshots
└── preview.gif
├── src
├── components
│ ├── App.js
│ ├── layouts
│ │ ├── Loader.js
│ │ └── Sidemenu.js
│ ├── pages
│ │ ├── About.js
│ │ ├── Contact.js
│ │ └── Home.js
│ ├── styling
│ │ ├── _variables.scss
│ │ ├── index.scss
│ │ ├── loader.scss
│ │ ├── page.scss
│ │ └── sidemenu.scss
│ └── utils
│ │ └── LocationRedirect.js
├── images
│ ├── logo.svg
│ └── post-loader.svg
└── index.js
└── yarn.lock
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # production
12 | /build
13 |
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 |
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # React Fullpage Loader
2 |
3 | Fullpage _React Loader_ that appears when changing routes.
4 |
5 | ### Preview
6 |
7 |

8 |
9 | ### How to use
10 |
11 | 1. Clone/Download the repo.
12 | 2. Install dependencies yarn install
or npm install
13 | 3. Run yarn start
or npm start
.
14 | 4. You are ready [http://localhost:3000](http://localhost:3000)
15 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-fullpage-loader",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "@testing-library/jest-dom": "^4.2.4",
7 | "@testing-library/react": "^9.3.2",
8 | "@testing-library/user-event": "^7.1.2",
9 | "node-sass": "^4.14.1",
10 | "react": "^16.13.1",
11 | "react-dom": "^16.13.1",
12 | "react-router-dom": "^5.2.0",
13 | "react-scripts": "3.4.1"
14 | },
15 | "scripts": {
16 | "start": "react-scripts start",
17 | "build": "react-scripts build",
18 | "test": "react-scripts test",
19 | "eject": "react-scripts eject"
20 | },
21 | "eslintConfig": {
22 | "extends": "react-app"
23 | },
24 | "browserslist": {
25 | "production": [
26 | ">0.2%",
27 | "not dead",
28 | "not op_mini all"
29 | ],
30 | "development": [
31 | "last 1 chrome version",
32 | "last 1 firefox version",
33 | "last 1 safari version"
34 | ]
35 | }
36 | }
37 |
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | React Fullpage Loader
8 |
9 |
10 |
11 |
12 |
16 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/screenshots/preview.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AchrafHamrit/react-fullpage-loader/25bb02637c4c91063d41281bee2bb0de902abd7e/screenshots/preview.gif
--------------------------------------------------------------------------------
/src/components/App.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 | import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
3 |
4 | import LocationRedirect from './utils/LocationRedirect';
5 | import Sidemenu from './layouts/Sidemenu';
6 | import Loader from './layouts/Loader';
7 | import Home from './pages/Home';
8 | import About from './pages/About';
9 | import Contact from './pages/Contact';
10 |
11 | function App() {
12 | const [hide, setHide] = useState(true);
13 | const [newLocation, setNewLocation] = useState(null);
14 |
15 | return (
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 | );
29 | }
30 |
31 | export default App;
32 |
--------------------------------------------------------------------------------
/src/components/layouts/Loader.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import '../styling/loader.scss';
3 | import Logo from '../../images/logo.svg';
4 |
5 | const Loader = ({ hide }) => {
6 | return (
7 |
8 |

9 |
10 | );
11 | };
12 |
13 | export default Loader;
14 |
--------------------------------------------------------------------------------
/src/components/layouts/Sidemenu.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Link } from 'react-router-dom';
3 | import '../styling/sidemenu.scss';
4 |
5 | const Sidemenu = ({ setNewLocation }) => {
6 | const handleLinkClick = (e) => {
7 | e.preventDefault();
8 |
9 | setNewLocation('/' + e.target.name);
10 | };
11 |
12 | return (
13 |
14 |
15 |
16 |
17 |
18 |
19 | -
20 |
26 | Home
27 |
28 |
29 | -
30 |
36 | About
37 |
38 |
39 | -
40 |
46 | Contact
47 |
48 |
49 |
50 |
51 | );
52 | };
53 |
54 | export default Sidemenu;
55 |
--------------------------------------------------------------------------------
/src/components/pages/About.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PostLoader from '../../images/post-loader.svg';
3 | import '../styling/page.scss';
4 |
5 | const About = () => {
6 | return (
7 |
8 |
9 |
About page
10 |

11 |
12 |
13 | );
14 | };
15 |
16 | export default About;
17 |
--------------------------------------------------------------------------------
/src/components/pages/Contact.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PostLoader from '../../images/post-loader.svg';
3 | import '../styling/page.scss';
4 |
5 | const Contact = () => {
6 | return (
7 |
8 |
9 |
Contact page
10 |

11 |
12 |
13 | );
14 | };
15 |
16 | export default Contact;
17 |
--------------------------------------------------------------------------------
/src/components/pages/Home.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PostLoader from '../../images/post-loader.svg';
3 | import '../styling/page.scss';
4 |
5 | const Home = () => {
6 | return (
7 |
8 |
9 |
Home page
10 |

11 |
12 |
13 | );
14 | };
15 |
16 | export default Home;
17 |
--------------------------------------------------------------------------------
/src/components/styling/_variables.scss:
--------------------------------------------------------------------------------
1 | $primary: #255dd6;
2 | $bg-light: #f2f8ff;
3 |
--------------------------------------------------------------------------------
/src/components/styling/index.scss:
--------------------------------------------------------------------------------
1 | @import './variables';
2 |
3 | html,
4 | body {
5 | overflow-x: hidden;
6 | }
7 |
8 | body {
9 | margin: 0;
10 | font-family: 'Montserrat', sans-serif;
11 | background: $bg-light;
12 |
13 | a {
14 | text-decoration: none;
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/src/components/styling/loader.scss:
--------------------------------------------------------------------------------
1 | @import './variables';
2 |
3 | .loader {
4 | position: absolute;
5 | display: flex;
6 | align-items: center;
7 | justify-content: flex-start;
8 | top: 0;
9 | bottom: 0;
10 | width: 100%;
11 | z-index: 9999;
12 | background: $primary;
13 | transition: 0.4s all ease;
14 |
15 | img {
16 | width: 100px;
17 | margin: auto;
18 | transition: 0.4s all ease;
19 | }
20 |
21 | &.hide {
22 | width: 0%;
23 |
24 | img {
25 | opacity: 0;
26 | }
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/src/components/styling/page.scss:
--------------------------------------------------------------------------------
1 | @import './variables';
2 |
3 | .page {
4 | min-height: 90vh;
5 | display: flex;
6 | flex-direction: row;
7 | align-items: center;
8 |
9 | .content {
10 | display: flex;
11 | flex-direction: column;
12 | padding: 100px 130px;
13 |
14 | h2 {
15 | color: $primary;
16 | font-size: 2rem;
17 | font-weight: 700;
18 | display: inline;
19 | }
20 |
21 | img {
22 | width: 250px;
23 | }
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/src/components/styling/sidemenu.scss:
--------------------------------------------------------------------------------
1 | @import './variables';
2 |
3 | .sidemenu {
4 | overflow: hidden;
5 | background-color: white;
6 | display: flex;
7 | align-items: center;
8 | position: absolute;
9 | top: 0;
10 | bottom: 0;
11 | z-index: 1;
12 | transition: 0.5s all ease;
13 | width: 90px;
14 |
15 | .humberger {
16 | padding: 0 30px;
17 | transition: 0.5s all ease;
18 |
19 | span {
20 | display: block;
21 | width: 30px;
22 | height: 4px;
23 | border-radius: 3px;
24 | background-color: $primary;
25 | transition: 0.5s all ease;
26 |
27 | &:first-child {
28 | margin-bottom: 4px;
29 | }
30 | }
31 | }
32 |
33 | ul {
34 | padding: 0 20px;
35 | list-style: none;
36 | font-size: 1.3rem;
37 | font-weight: 600;
38 | opacity: 0;
39 | transition: 0.4s all ease;
40 |
41 | li {
42 | display: flex;
43 | padding: 15px 0;
44 | transform: translateX(10px);
45 | transition: 0.4s all ease;
46 |
47 | .title {
48 | color: white;
49 | }
50 |
51 | &:hover {
52 | opacity: 0.5;
53 | }
54 | }
55 | }
56 |
57 | &:hover {
58 | background-color: $primary;
59 | width: 300px;
60 |
61 | .humberger {
62 | span {
63 | transform: rotate(90deg);
64 | background-color: white;
65 | }
66 | }
67 |
68 | ul {
69 | opacity: 1;
70 | transform: translateX(-10px);
71 | }
72 | }
73 | }
74 |
--------------------------------------------------------------------------------
/src/components/utils/LocationRedirect.js:
--------------------------------------------------------------------------------
1 | import React, { useEffect } from 'react';
2 | import { useLocation, useHistory } from 'react-router-dom';
3 |
4 | const LoactionRedirect = ({ newLocation, setHide }) => {
5 | const location = useLocation().pathname;
6 | const history = useHistory();
7 |
8 | useEffect(() => {
9 | if (newLocation && newLocation !== location) {
10 | setHide(false);
11 | setTimeout(() => {
12 | history.push(newLocation);
13 | setHide(true);
14 | }, 2000);
15 | }
16 |
17 | // eslint-disable-next-line
18 | }, [newLocation]);
19 |
20 | return <>>;
21 | };
22 |
23 | export default LoactionRedirect;
24 |
--------------------------------------------------------------------------------
/src/images/logo.svg:
--------------------------------------------------------------------------------
1 |
11 |
--------------------------------------------------------------------------------
/src/images/post-loader.svg:
--------------------------------------------------------------------------------
1 |
15 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import './components/styling/index.scss';
4 | import App from './components/App';
5 |
6 | ReactDOM.render(
7 |
8 |
9 | ,
10 | document.getElementById('root')
11 | );
12 |
--------------------------------------------------------------------------------