Create 3 different types of Loading Screens in React (Part-3)

This is the part 3 of Create 3 different types of Loading Screens in React where we're going to build 3rd type of Loading Screen.

In this part we are not going to use any library instead we are only using simple css styling.

Now the logic of displaying pre-loader is same as in the part-2 so here I'm not going to show you the whole process.

Create new file PreLoader3.js

Copy the whole code from PreLoader2.js file and remove all code related with react-Lottie library and keep everything as it is.

only change return statement as shown below,

 return (
    <>
      {!completed ? (
        <>
          {!loading ? (
            <div className="spinner">
              <span>Loading...</span>
              <div className="half-spinner"></div>
            </div>
          ) : (
            <div className="completed">&#x2713;</div>
          )}
        </>
      ) : (
        <>
          <h1>Your Data</h1>
        </>
      )}
    </>
  );

In the above code,

div with the class spinner contains Loading text and spinner.
while div with the className completed contains success symbol.(✓).

Now let's do some css styling.

crate separate file preloader3.css for styling and import it in the preloader3.js file.

Now,
.spinner class is simply box for spinner.

.spinner span contains styling and animation for loading text.

.half-spinner contains styling for spinner.
now to cut this whole spinner as in line no 20 you just have to set border top to transparent.

.completed contains styling and animation for success(✓) symbol.

This is the End of this whole series.

You can find Full-Code repository from here.

Thanks For Reading and Supporting.😄

Feel free to visit my youtube channel:

@CodeBucks

Follow me on Twitter where I'm sharing lot's of useful resources!

@code.bucks 😉