JavaScript styled/animations spinAnimation Examples

Example #1

File: Spinner.js Project: robertkirsz/mtg-collection

 animation: ${props => spinAnimation(-props.rotation)} 2s linear infinite reverse;

Example #2

File: Spinner.js Project: robertkirsz/mtg-collection

import React from 'react'
import styled from 'styled-components'
import { AbsoluteFullSize } from 'styled'
import { spinAnimation } from 'styled/animations'

const SpinnerContainer = styled.div`
  position: relative;
  width: 100px;
  height: 100px;
  margin: 100px auto;
  animation: ${spinAnimation(0)} 2s linear infinite;
`

const SpinnerLayer = styled(AbsoluteFullSize)`
  transform: rotate(${props => props.rotation}deg);
`

const SpinnerDot = styled.span`
  position: relative;
  display: block;
  width: 20px;
  height: 20px;
  margin: 0 auto;
  border-radius: 50%;
  background: ${props => props.color};
  transform: rotate(${props => -props.rotation}deg);
  animation: ${props => spinAnimation(-props.rotation)} 2s linear infinite reverse;

  &::after {
    content: "";
    display: block;