LoaderIcon.md

LoaderIcon

A funny animation to pass the waiting time.

<LoaderIcon />

.loader-icon {
    --size: 20px;
    --move-type: move-type-1;
    --move-size: calc(var(--size) / 2);
    --move-duration: 3s;
    --move-timing-function: ease-in-out;
    --spin-type: spin-type-1;
    --spin-duration: 2s;
    --spin-timing-function: linear;
    --spin-direction: normal;
    --color1: #D00;
    --color2: #00D;
    --color3: #DD0;
    --color4: #0D0;
    --color-duration: 2s;
    --color-timing-function: ease-in-out;
    --top-left-animation-type: ball-action-square;
    --top-left-animation-duration: 8s;
    --top-right-animation-type: ball-action-circle;
    --top-right-animation-duration: 6s;
    --bottom-left-animation-type: ball-action-line;
    --bottom-left-animation-duration: 4s;
    --bottom-right-animation-type: ball-action-big;
    --bottom-right-animation-duration: 10s;
}

CSS Variables: .loader-icon

Name	Default Value
--size	20px
--move-type	move-type-1
--move-size	calc(var(--size) / 2)
--move-duration	3s
--move-timing-function	ease-in-out
--spin-type	spin-type-1
--spin-duration	2s
--spin-timing-function	linear
--spin-direction	normal
--color1	#D00
--color2	#00D
--color3	#DD0
--color4	#0D0
--color-duration	2s
--color-timing-function	ease-in-out
--top-left-animation-type	ball-action-square
--top-left-animation-duration	8s
--top-right-animation-type	ball-action-circle
--top-right-animation-duration	6s
--bottom-left-animation-type	ball-action-line
--bottom-left-animation-duration	4s
--bottom-right-animation-type	ball-action-big
--bottom-right-animation-duration	10s