create a spinner & add a loader in react



~2 min read


250 words

Using two libraries, styled-components and react-image, I learned a new simple way to create a Loader component (i.e. a spinner) to be used while an image is being loaded in a react application.

Create Your Spinner

A spinner is just a component with animation. However, in the process of doing this, I learned about the tagged template literal support for keyframes in styled-components.1

If you’re building out a library of UI components (as I am), this type of abstraction can be really nice.

Here’s an example Loader component.

import styled, { keyframes } from 'styled-components'

const spin = keyframes`
    0% {
        transform: rotate(0deg);
    100% {
        transform: rotate(360deg);

export const Loader = styled.div`
  border: 0.2em solid rgba(0, 0, 0, 0.1);
  border-top: 0.2em solid #767676;
  border-radius: 50%;
  width: 2.28571429rem;
  height: 2.28571429rem;
  animation: ${spin} 0.6s linear infinite;

export default Loader

Create An Image With A Loader

Now that I have a loader, I can pull it into my ImageComponent and use it while the image is loading thanks to the straightforward API of react-image.2

import React from 'react'
import Img from 'react-image'

import { housePlaceholder } from 'assets'
import { Loader } from './Loader'

function ImageComponent(props) {
  const { alt, image } = props
  return (
    <Img alt={alt} src={image ? image : housePlaceholder} loader={<Loader />} />

export default ImageComponent


Hi there and thanks for reading! My name's Stephen. I live in Chicago with my wife, Kate, and dog, Finn. Want more? See about and get in touch!