DEV Community

Stephen Charles Weiss
Stephen Charles Weiss

Posted on • Originally published at stephencharlesweiss.com on

Create A Spinner & Add A Loader In React

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

Footnotes

Top comments (4)

Collapse
 
dance2die profile image
Sung M. Kim

Nice one, Stephen.

Here is the demo sandbox.

Collapse
 
stephencweiss profile image
Stephen Charles Weiss

Ha! As I reviewed this I thought to myself: "There really should be a fiddle..."

Thanks for filling in the gap Sung!

Collapse
 
dance2die profile image
Sung M. Kim

You're welcome and thanks for the post~

Collapse
 
rewathkafley profile image
Rewath

How to fix the spinner from wobbling?