keystone/admin/client/App/elemental/Spinner/styles.js

Web Application Framework and Admin GUI / Content Management System built on Express.js and Mongoose

// ==============================
// Spinner
// ==============================

import { compose } from 'glamor';
import theme from '../../../theme';
import colors from './colors';
import sizes from './sizes';

// Prepare variants
const colorVariants = {};
colors.forEach(color => {
	colorVariants[`color__${color}`] = {
		backgroundColor: theme.spinner.color[color],
	};
});

// Prepare sizes
const sizeVariants = {};
sizes.forEach(size => {
	sizeVariants[`size__${size}`] = {
		fontSize: theme.spinner.size[size],
	};
});

// Declare animation keyframes

const keyframes = compose.keyframes('pulse', {
	'0%, 80%, 100%': { opacity: 0 },
	'40%': { opacity: 1 },
});

module.exports = {
	base: {
		display: 'inline-block',
		lineHeight: 1,
		textAlign: 'center',
		verticalAlign: 'middle',
		width: '5em',
	},
	small:	{ fontSize: 4 },
	medium:	{ fontSize: 8 },
	large:	{ fontSize: 16 },

	// text
	text: {
		border: 0,
		clip: 'rect(0,0,0,0)',
		height: 1,
		margin: -1,
		overflow: 'hidden',
		padding: 0,
		position: 'absolute',
		width: 1,
	},

	// dots
	dot: {
		animationName: keyframes,
		animationDuration: '1s',
		animationIterationCount: 'infinite',
		borderRadius: '1em',
		display: 'inline-block',
		height: '1em',
		verticalAlign: 'top',
		width: '1em',
	},
	dot__second: {
		animationDelay: '160ms',
		marginLeft: '1em',
	},
	dot__third: {
		animationDelay: '320ms',
		marginLeft: '1em',
	},

	// Colors
	...colorVariants,

	// Sizes
	...sizeVariants,
};