@mtec-solutions-org/design-system/dist/components/atoms/spinner/Spinner.styles.js

A React Native Web design system library with theme and components

import { styled, View } from '@dripsy/core';
export const StyledSpinner = styled(View)(({ spinnerSize = 20, spinnerColor, spinnerWidth = 2 }) => ({
    borderRadius: '50%',
    borderStyle: 'solid',
    borderColor: 'transparent',
    borderTopColor: spinnerColor,
    width: [
        spinnerSize,
        spinnerSize * 1.1,
    ],
    height: [
        spinnerSize,
        spinnerSize * 1.1,
    ],
    borderWidth: [
        spinnerWidth,
        Math.max(spinnerWidth * 1.2, 2),
    ],
    '@keyframes spin': {
        '0%': { transform: 'rotate(0deg)' },
        '100%': { transform: 'rotate(360deg)' },
    },
    animationName: 'spin',
    animationDuration: '1s',
    animationIterationCount: 'infinite',
    animationTimingFunction: 'linear',
}));