@ionic/core
Version:
Base components for Ionic
93 lines (92 loc) • 2.7 kB
JavaScript
const spinners = {
'lines': {
dur: 1000,
lines: 12,
fn: (dur, index, total) => {
const transform = `rotate(${30 * index + (index < 6 ? 180 : -180)}deg)`;
const animationDelay = `${(dur * index / total) - dur}ms`;
return {
y1: 17,
y2: 29,
style: {
'transform': transform,
'animation-delay': animationDelay,
}
};
}
},
'lines-small': {
dur: 1000,
lines: 12,
fn: (dur, index, total) => {
const transform = `rotate(${30 * index + (index < 6 ? 180 : -180)}deg)`;
const animationDelay = `${(dur * index / total) - dur}ms`;
return {
y1: 12,
y2: 20,
style: {
'transform': transform,
'animation-delay': animationDelay,
}
};
}
},
'bubbles': {
dur: 1000,
circles: 9,
fn: (dur, index, total) => {
const animationDelay = `${(dur * index / total) - dur}ms`;
const angle = 2 * Math.PI * index / total;
return {
r: 5,
style: {
'top': `${9 * Math.sin(angle)}px`,
'left': `${9 * Math.cos(angle)}px`,
'animation-delay': animationDelay,
}
};
}
},
'circles': {
dur: 1000,
circles: 8,
fn: (dur, index, total) => {
const step = index / total;
const animationDelay = `${(dur * step) - dur}ms`;
const angle = 2 * Math.PI * step;
return {
r: 5,
style: {
'top': `${9 * Math.sin(angle)}px`,
'left': `${9 * Math.cos(angle)}px`,
'animation-delay': animationDelay,
}
};
}
},
'crescent': {
dur: 750,
circles: 1,
fn: () => {
return {
r: 26,
style: {}
};
}
},
'dots': {
dur: 750,
circles: 3,
fn: (_, index) => {
const animationDelay = -(110 * index) + 'ms';
return {
r: 6,
style: {
'left': `${9 - (9 * index)}px`,
'animation-delay': animationDelay,
}
};
}
}
};
export const SPINNERS = spinners;