Your Web News in One Place

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
March 29, 2022 11:47 am GMT

Splash Screen on Gatsby JS

If you embark on the problem to add splash screen to you gatsby website you are in the right place. I myself was trying to add the splash screen to the website and had to go a lot forums and couldn't but finally done that.

You let me tell you how did I do it

Image description

So first find a cool GIF you want to add as an splash screen then add loader code

src/loader.js

import React from "react";import styled from "styled-components";import BCTLoader from "../../assets/gif/BCTloader.gif";const Loader = () => {  return (    <LoaderWrapper id="loader-wrapper">      <img src={BCTLoader} alt="GIF Image" />    </LoaderWrapper>  );};export default Loader;

and add some css to it, I like working with styled components feel free to it with css

const LoaderWrapper = styled.div`  position: fixed;  top: 0;  left: 0;  width: 100%;  height: 100%;  background-color: #ffff;  z-index: 9999;  display: none;  justify-content: center;  align-items: center;  img {    width: 20vw;  }`;

Add that to your layout file if you have any if you don't have that please make one so we can have a wrapper for all the pages

src/layout.js

import React from "react";import Header from "./Navbar";import Footer from "./Footer";import Loader from "./Loader";const Layout = ({ children }) => {  return (    <>      <Header />      <main>{children}</main>      <Footer />      <Loader />    </>  );};export default Layout;

Now when you are done with it we can work with gatsby brower so we can access initial rendering

gatsby-browser.js

export const onInitialClientRender = () => {  setTimeout(() => {    if (document.getElementById("loader-wrapper")) {      document.getElementById("loader-wrapper").style.display = "flex";    }  }, 0);};export const onRouteUpdate = () => {  setTimeout(() => {    if (document.getElementById("loader-wrapper")) {      document.getElementById("loader-wrapper").style.display = "none";    }  }, 3500);};

Original Link: https://dev.to/faranmustafa/splash-screen-on-gatsby-js-1gom

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To