The simplest React Loader

react, frontend

When I'm messing about with React I often need a loading component as a placeholder. Here I create a simple one with no dependencies

A bascic HTML / JS spinning loader

The simplest possible loader I can think of is a rotating partial disk. It's just a single div with some CSS; the only complication is the animation.

Start by creating a circle; with CSS you can do that simply by setting the border-radius of a div to 50%.

.loading { border-radiust: 50%; border: 10px solid red; display: inline-block; height: 50px; width: 50px; }

You also need a few other CSS rules like the border-color, width and height (make sure they are the same!) and so on. To remove a section of the circle, just remove one of the borders by making its colour transparent - I have removed boorder-left - and there you have it!

To animate it you need a keyframes object with the state at the beginning and end of the cycle. Even better, you don't even need the 'from' state, it is just the initial state as defined in the other styles. Then you refer to those keyframe with the animation rule

.loading { animation: 1s linear infinite gotofritz-spin; and bingo! .... }

See the Pen The Simplest React Loader - step 1 by gotofritz (@gotofritz) on CodePen.

Introducing React

As a first step I will remove the HTML completely, introduce React and have it render the div that was priorly in the HTML. It will be a simple one line stateless, functional component, attached directly to the body

function Loading() {
return <div className="loading" />;
}

ReactDOM.render(<Loading />, document.getElementsByTagName('body')[0]);

So the HTML is gone; now I need to make the CSS disappear, as I want to have a simple one file component that doesn't make any assumptios about how the CSS is handled. For the first part I just turn the CSS into a JS object, and pass it to the component. I can even have some of the CSS set by props

function Loading({ size = 50} = props) {
    const style = {
        display: 'inline-block',
        width: `${size}px`,
        ...
    }
}
ReactDOM.render(
    <Loading size="50" />,
    document.getElementsByTagName('body')[0]
);

The only thing left to add the animation itself to the component.

See the Pen The Simplest React Loader - step 2 by gotofritz (@gotofritz) on CodePen.

Adding keframes to the inline style of the React component

There are many (too many..?) ways to handle CSS with React components. But they all introduce dependencies, and I don't want that. All of these solutions one way or another end up generating CSS on the fly and adding it to the document. I can do that as well; it's just one line of CSS after all. I put that in the component, checking to see if the style already exists.

See the Pen The Simplest React Loader by gotofritz (@gotofritz) on CodePen.

And there you have it - the simplest of loaders, fairly customisable and all in one file, without dependencies. It's not something I would use in production (although it wouldn't be the end of the world if I did) but it's great for quick prototyping.