franken-ui/dist/uikit/stylings/spinner.js

Franken UI is an HTML-first, open-source library of UI components based on the utility-first Tailwind CSS with UIkit 3 compatibility. The design is based on shadcn/ui ported to be framework-agnostic.

import merge from 'lodash/merge.js';
export const rules = {
    '.uk-spinner > *': { animation: 'uk-spinner-rotate 1.4s linear infinite' },
    '@keyframes uk-spinner-rotate': {
        '0%': { transform: 'rotate(0deg)' },
        '100%': { transform: 'rotate(270deg)' }
    },
    '.uk-spinner > * > *': {
        strokeDasharray: '88px',
        strokeDashoffset: '0',
        transformOrigin: 'center',
        animation: 'uk-spinner-dash 1.4s ease-in-out infinite',
        strokeWidth: '1',
        strokeLinecap: 'round'
    },
    '@keyframes uk-spinner-dash': {
        '0%': { strokeDashoffset: '88px' },
        '50%': { strokeDashoffset: '22px', transform: 'rotate(135deg)' },
        '100%': { strokeDashoffset: '88px', transform: 'rotate(450deg)' }
    }
};
export const addHooks = (args) => {
    const { hooks } = args;
    const defaultHooks = {
        'hook-spinner': {},
        'hook-misc': {}
    };
    const _hooks = merge(defaultHooks, hooks);
    return {
        '.uk-spinner': {
            ..._hooks['hook-spinner']
        },
        ..._hooks['hook-misc']
    };
};