Doesn’t that title sound like fun?? For Part 1 of this 2 part post I’m going to show you how to build two vanilla CSS ‘loading’ components in React using Styled Components. The loaders will be able to take an assortment of props (height, width, color, etc..) to be customized any way your heart (or since we’ll be making it an open source project) your new user’s heart’s content.

Moving forward in Part 2 we’re going to turn our newly minted loaders into an NPM package for all to enjoy! The open source effort is what makes this industry the greatest and contributing to it has always been a goal of mine (no matter how small). Ok, let’s get started!!

In Part 2 we’ll actually create a directory and files locally so that we can publish our NPM package, however for Part 1 we’re simply going to create the initial React components in codesandbox.io to make everything easily shareable (and so you can play around with the code much easier and improve upon what I do!!).

Head on over to codesandbox.io and click create sandbox (top right) then click React. This will give us a starter React project. Next on the left hand side menu click Add Dependency (towards the bottom).

Next, search for styled-components in the modal’s search bar and choose that package (should be at the top). If you’re not familiar with styled-components check them out here. In short they let us write vanilla CSS inside our .js(x) files and .. well.. they’re awesome.

ok, great now add a new file called PulseLoader.js in our src folder and copy paste the code below.

See that there? styled-components let us write our CSS directly in our PulseLoader.js file, awesome-sauce indeed.

Next, create another file in our src folder called BounceLoader.js and copy and paste the following code.

Notice this time we render a few span s inside our BounceLoader div and in the CSS styled-components lets us nest our CSS, again…. awesome-sauce!

Now in our index.js file copy and paste the below…

You should now see both of our loaders appear in the screen to the right and look like this..

loaders with only loading prop passed in

We did it!!!! Now let’s test out our props! copy and paste the below (it goes without saying, but replace the previous App )..

Notice we added a height width and pColor (primary color) to both as well as an sColor (secondary color) to PulseLoader … you should now see something like the below..

Boom goes the dynamite!

Ok, folks thats it for Part 1! You can find my codesandbox.io here. Shout out to GIFs.com for making it so easy to make the above gifs.

Please check out Part 2 here.