Simple Homemade Loading Screen in React

Reference tutorial

In my last blog, I mentioned this tutorial by Tony Heimark that is super easy to follow. I'll be going off of that, but making the animation instead. He uses the package, react-spinners. Instead of that, I'll be using the flower icon I found off of flaticon.com.

Finding an image

I went into google and typed in "flower icon". I went to flaticon.com. I just right clicked the image for the image address. This gives an image with no background.

App.js

In App.js, I made a useEffect with a setTimeout inside. This will be how long the screen is loading for. This will load for 5 seconds.

  const [loading, setLoading] = useState(false);
  useEffect(() =>
  {
    setLoading(true)
    setTimeout(() =>
    {
      setLoading(false)
    }, 5000)
  }, [])

Under return, I made a ternary statement with the loading state. If loading is true, show the loading screen. If loading is false, show the homepage.

  return (
    <div class="App">
      {loading ? 
        <Flower />
      :
      <div class="homePage">

I made a separate component for the loading screen called, "Flower".

Flower.js

In Flower.js, I made a useEffect with the animation inside it.

  useEffect(() =>
  {
     gsap.to("#flower", 1.75, 
     {
        y: 75,
        yoyo: true,
        repeat: -1, 
        ease: "power1",
     });
 }, [])

This animation makes the flower float up and down. 1.75 is the amount of time for the animation. The "y" makes it move up 75 pixels. The yoyo being true means the flower will yoyo up and down 75 pixels. The repeat being -1 means it will repeat forever. The ease is the kind of style it is moving.

Under return, I added the image and a tag that says it's loading.

  return (
    <div class="loadingScreen">
        <img className="bus" src="https://t4.ftcdn.net/jpg/01/76/26/25/360_F_176262588_5UBYLDB9mqLxdqavixo0d4XF4g6ydFpZ.jpg" />
        <h1 id="loadingText">Loading...</h1>
    </div>
  )

I was playing around with it, and another animation idea would be for the flower to spin.

gsap.to("#flower", 2, 
{
    rotation: 360,
    repeat: -1, 
    ease: "slow",
 });

This just rotates the flower 360 degrees forever with a "slow" style.