Skip to content

Instantly share code, notes, and snippets.

@rupesx26
Last active February 27, 2020 18:36
Show Gist options
  • Save rupesx26/241b3b7f1c907b226914990b02d35097 to your computer and use it in GitHub Desktop.
Save rupesx26/241b3b7f1c907b226914990b02d35097 to your computer and use it in GitHub Desktop.
How to use multiple spin loader in page
//Hope you added spin.js and spin.css added in your html folder
// Custom spinner config
const customSpinner = {
custSpinUno: {
scale: 0.18,
color: '#d0d5db'
},
custSpinDos: {
scale: 0.18,
color: '#338df6'
}
};
// Spinner default config
const spinnerInit = (target, opts) => {
const defaults = {
lines: 13, // The number of lines to draw
length: 38, // The length of each line
width: 17, // The line thickness
radius: 45, // The radius of the inner circle
scale: 0.18, // Scales overall size of the spinner
corners: 1, // Corner roundness (0..1)
color: '#338df6', // CSS color or array of colors
fadeColor: 'transparent', // CSS color or array of colors
speed: 1, // Rounds per second
rotate: 0, // The rotation offset
animation: 'spinner-line-fade-quick', // The CSS animation name for the lines
direction: 1, // 1: clockwise, -1: counterclockwise
zIndex: 2e9, // The z-index (defaults to 2000000000)
className: 'spinner', // The CSS class to assign to the spinner
top: 'auto', // Top position relative to parent
left: 'auto', // Left position relative to parent
shadow: '0 0 1px transparent', // Box-shadow for the lines
position: 'relative' // Element positioning
};
//Assign custom config
const _opts = Object.keys(defaults).reduce(
(acc, optionName) => {
const { rawdata, options } = acc;
options[optionName] = defaults[optionName];
if (!utility.isNullOrEmpty(rawdata[optionName])) {
options[optionName] = rawdata[optionName];
}
return { rawdata, options };
},
{ rawdata: opts || {}, options: {} }
).options;
//spinner initiated
const spinner = new Spinner(_opts).spin();
target.data('spinner', spinner);
target.append(spinner.el);
};
//Usages:- will call in your ajax
spinnerInit($('.your-targeted-class-or-id'), customSpinner.custSpinUno);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment