Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
keyframes and pseudo-elements usage in styled-components
/* src/components/Loader.js */
/* line 1 - 39 */
import React from 'react';
import styled, { keyframes } from 'styled-components';
import { getColor } from '../utils/theme'
const Loader = ({ className }) => (<div className={className}><Loading/></div>)
const loading = keyframes`
0% {
transform: rotate(0);
} 100% {
transform: rotate(360deg);
}
`;
const Loading = styled.div`
color: transparent;
min-height: 2rem;
pointer-events: none;
position: relative;
&::after {
content: "";
animation: ${loading} .5s infinite linear;
border: .1rem solid ${getColor('primary')};
border-radius: 50%;
border-right-color: transparent;
border-top-color: transparent;
display: block;
z-index: 1;
left: 50%;
position: absolute;
top: 50%;
height: 1.6rem;
width: 1.6rem
margin-left: -.8rem;
margin-top: -.8rem;
}
`;
.
.
.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.