Skip to content

Instantly share code, notes, and snippets.

@adrianmcli
Created December 3, 2017 01:26
Show Gist options
  • Save adrianmcli/9fac3ff3c144c2805be90381eaa8d3d4 to your computer and use it in GitHub Desktop.
Save adrianmcli/9fac3ff3c144c2805be90381eaa8d3d4 to your computer and use it in GitHub Desktop.
Dead simple loading spinner with just CSS in styled-components.
import styled, { keyframes } from "styled-components";
const rotate360 = keyframes`
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
`;
const Spinner = styled.div`
animation: ${rotate360} 1s linear infinite;
transform: translateZ(0);
border-top: 2px solid grey;
border-right: 2px solid grey;
border-bottom: 2px solid grey;
border-left: 4px solid black;
background: transparent;
width: 24px;
height: 24px;
border-radius: 50%;
`;
export default Spinner;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment