How to use the ui-box.css.keyframes function in ui-box
To help you get started, we’ve selected a few ui-box examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
segmentio / evergreen / packages / evergreen-spinner / src / components / Spinner.js View on Github 
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import Box, { css } from 'ui-box'
import colors from 'evergreen-colors'
const loadingKeyframes = css.keyframes('loading', {
'0%': {
transform: 'rotate(0)'
},
'100%': {
transform: 'rotate(360deg)'
}
})
const loadingCircleKeyframes = css.keyframes('loading-circle', {
'0%': {
strokeDashoffset: 600
},
'100%': {
strokeDashoffset: 0
}
})import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import Box, { css } from 'ui-box'
import colors from 'evergreen-colors'
const loadingKeyframes = css.keyframes('loading', {
'0%': {
transform: 'rotate(0)'
},
'100%': {
transform: 'rotate(360deg)'
}
})
const loadingCircleKeyframes = css.keyframes('loading-circle', {
'0%': {
strokeDashoffset: 600
},
'100%': {
strokeDashoffset: 0
}
})
const outer = {
animation: `${loadingKeyframes} 3s linear infinite`
}
const inner = {
strokeDashoffset: 600,
strokeDasharray: 300,
strokeWidth: 12,
