skeleton-loader-vue
Version:
A simple, customizable skeleton loader for your vue app
469 lines (410 loc) • 13.8 kB
JavaScript
//
//
//
//
var script = {
props: {
height: {
type: [Number, String],
default: 100
},
width: {
type: [Number, String],
default: 100
},
color: {
type: String,
default: 'rgba(0, 0, 0, 0.12)'
},
animation: {
type: String,
default: 'wave'
}
},
computed: {
bindClass() {
return `animation--${this.animation}`;
}
},
mounted() {
const width = typeof this.width === 'number' ? `${this.width}px` : this.width;
const height = typeof this.width === 'number' ? `${this.height}px` : this.height;
const background = `${this.color}`;
const loader = this.$el;
loader.style.setProperty('width', width);
loader.style.setProperty('height', height);
loader.style.setProperty('background-color', background);
}
};
function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
if (typeof shadowMode !== 'boolean') {
createInjectorSSR = createInjector;
createInjector = shadowMode;
shadowMode = false;
}
// Vue.extend constructor export interop.
const options = typeof script === 'function' ? script.options : script;
// render functions
if (template && template.render) {
options.render = template.render;
options.staticRenderFns = template.staticRenderFns;
options._compiled = true;
// functional template
if (isFunctionalTemplate) {
options.functional = true;
}
}
// scopedId
if (scopeId) {
options._scopeId = scopeId;
}
let hook;
if (moduleIdentifier) {
// server build
hook = function (context) {
// 2.3 injection
context =
context || // cached call
(this.$vnode && this.$vnode.ssrContext) || // stateful
(this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext); // functional
// 2.2 with runInNewContext: true
if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
context = __VUE_SSR_CONTEXT__;
}
// inject component styles
if (style) {
style.call(this, createInjectorSSR(context));
}
// register component module identifier for async chunk inference
if (context && context._registeredComponents) {
context._registeredComponents.add(moduleIdentifier);
}
};
// used by ssr in case component is cached and beforeCreate
// never gets called
options._ssrRegister = hook;
}
else if (style) {
hook = shadowMode
? function (context) {
style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot));
}
: function (context) {
style.call(this, createInjector(context));
};
}
if (hook) {
if (options.functional) {
// register for functional component in vue file
const originalRender = options.render;
options.render = function renderWithStyleInjection(h, context) {
hook.call(context);
return originalRender(h, context);
};
}
else {
// inject component registration as beforeCreate hook
const existing = options.beforeCreate;
options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
}
}
return script;
}
const isOldIE = typeof navigator !== 'undefined' &&
/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());
function createInjector(context) {
return (id, style) => addStyle(id, style);
}
let HEAD;
const styles = {};
function addStyle(id, css) {
const group = isOldIE ? css.media || 'default' : id;
const style = styles[group] || (styles[group] = { ids: new Set(), styles: [] });
if (!style.ids.has(id)) {
style.ids.add(id);
let code = css.source;
if (css.map) {
// https://developer.chrome.com/devtools/docs/javascript-debugging
// this makes source maps inside style tags work properly in Chrome
code += '\n/*# sourceURL=' + css.map.sources[0] + ' */';
// http://stackoverflow.com/a/26603875
code +=
'\n/*# sourceMappingURL=data:application/json;base64,' +
btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) +
' */';
}
if (!style.element) {
style.element = document.createElement('style');
style.element.type = 'text/css';
if (css.media)
style.element.setAttribute('media', css.media);
if (HEAD === undefined) {
HEAD = document.head || document.getElementsByTagName('head')[0];
}
HEAD.appendChild(style.element);
}
if ('styleSheet' in style.element) {
style.styles.push(code);
style.element.styleSheet.cssText = style.styles
.filter(Boolean)
.join('\n');
}
else {
const index = style.ids.size - 1;
const textNode = document.createTextNode(code);
const nodes = style.element.childNodes;
if (nodes[index])
style.element.removeChild(nodes[index]);
if (nodes.length)
style.element.insertBefore(textNode, nodes[index]);
else
style.element.appendChild(textNode);
}
}
}
/* script */
const __vue_script__ = script;
/* template */
var __vue_render__ = function () {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c('div', {
staticClass: "loader loader--circle",
class: _vm.bindClass
});
};
var __vue_staticRenderFns__ = [];
/* style */
const __vue_inject_styles__ = function (inject) {
if (!inject) return;
inject("data-v-c49d1d20_0", {
source: ".loader--circle[data-v-c49d1d20]{overflow:hidden;width:100px;height:100px;background-color:red;border-radius:50%;position:relative}.loader--circle[data-v-c49d1d20]::before{content:\"\";display:block;position:absolute;left:0;right:0;bottom:0;top:0}",
map: undefined,
media: undefined
});
};
/* scoped */
const __vue_scope_id__ = "data-v-c49d1d20";
/* module identifier */
const __vue_module_identifier__ = undefined;
/* functional template */
const __vue_is_functional_template__ = false;
/* style inject SSR */
/* style inject shadow dom */
const __vue_component__ = /*#__PURE__*/normalizeComponent({
render: __vue_render__,
staticRenderFns: __vue_staticRenderFns__
}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, createInjector, undefined, undefined);
//
//
//
//
var script$1 = {
props: {
height: {
type: [Number, String],
default: 100
},
width: {
type: [Number, String],
default: 200
},
color: {
type: String,
default: 'rgba(0, 0, 0, 0.12)'
},
animation: {
type: String,
default: 'wave'
},
type: {
type: String,
default: 'rect'
},
rounded: {
type: Boolean,
default: false
},
radius: {
type: [Number, String],
default: 0
}
},
computed: {
style() {
return {
width: typeof this.width === 'number' ? `${this.width}px` : this.width,
height: typeof this.width === 'number' ? `${this.height}px` : this.height,
'background-color': `${this.color}`,
'border-radius': this.rounded ? `${this.radius}px` : 0
};
},
bindClass() {
return `animation--${this.animation} shape--${this.type} shape--${this.rounded ? 'round' : 'flat'}`;
}
},
mounted() {
const width = typeof this.width === 'number' ? `${this.width}px` : this.width;
const height = typeof this.width === 'number' ? `${this.height}px` : this.height;
const background = `${this.color}`;
const borderRadius = this.rounded ? `${this.radius}px` : 0;
const loader = this.$el;
loader.style.setProperty('width', width);
loader.style.setProperty('height', height);
loader.style.setProperty('background-color', background);
loader.style.setProperty('border-radius', borderRadius);
}
};
/* script */
const __vue_script__$1 = script$1;
/* template */
var __vue_render__$1 = function () {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c('div', {
staticClass: "loader",
class: _vm.bindClass
});
};
var __vue_staticRenderFns__$1 = [];
/* style */
const __vue_inject_styles__$1 = function (inject) {
if (!inject) return;
inject("data-v-39eb697a_0", {
source: ".loader[data-v-39eb697a]{overflow:hidden;position:relative}.loader[data-v-39eb697a]::before{content:\"\";display:block;position:absolute;left:0;right:0;bottom:0;top:0}.shape--text[data-v-39eb697a]{height:20px}.shape--round[data-v-39eb697a]{border-radius:8px}",
map: undefined,
media: undefined
});
};
/* scoped */
const __vue_scope_id__$1 = "data-v-39eb697a";
/* module identifier */
const __vue_module_identifier__$1 = undefined;
/* functional template */
const __vue_is_functional_template__$1 = false;
/* style inject SSR */
/* style inject shadow dom */
const __vue_component__$1 = /*#__PURE__*/normalizeComponent({
render: __vue_render__$1,
staticRenderFns: __vue_staticRenderFns__$1
}, __vue_inject_styles__$1, __vue_script__$1, __vue_scope_id__$1, __vue_is_functional_template__$1, __vue_module_identifier__$1, false, createInjector, undefined, undefined);
//
var script$2 = {
components: {
CircleLoader: __vue_component__,
SquareLoader: __vue_component__$1
},
props: {
type: {
type: String,
default: 'rect'
},
size: {
type: [Number, String]
},
animation: {
type: String,
default: 'wave'
},
height: {
type: [Number, String]
},
width: {
type: [Number, String]
},
color: {
type: String,
default: 'rgba(0, 0, 0, 0.12)'
},
waveColor: {
type: String
},
rounded: {
type: Boolean,
default: false
},
radius: {
type: [Number, String],
default: 8
}
},
computed: {
loaderWidth() {
if (this.size) {
return this.size;
} else {
return this.width;
}
},
loaderHeight() {
if (this.size) {
return this.size;
} else {
return this.height;
}
}
},
mounted() {
if (this.waveColor) {
this.$el.style.setProperty('--gradient-color', this.waveColor);
}
}
};
/* script */
const __vue_script__$2 = script$2;
/* template */
var __vue_render__$2 = function () {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _vm.type === 'circle' ? _c('circle-loader', {
attrs: {
"width": _vm.loaderWidth,
"height": _vm.loaderHeight,
"animation": _vm.animation,
"color": _vm.color
}
}) : _c('square-loader', {
attrs: {
"width": _vm.loaderWidth,
"height": _vm.loaderHeight,
"animation": _vm.animation,
"type": _vm.type,
"color": _vm.color,
"rounded": _vm.rounded,
"radius": _vm.radius
}
});
};
var __vue_staticRenderFns__$2 = [];
/* style */
const __vue_inject_styles__$2 = function (inject) {
if (!inject) return;
inject("data-v-28d24b2c_0", {
source: ".loader{width:fit-content;cursor:wait;--gradient-color:rgba(255, 255, 255, 0.5)}@keyframes fade{0%{opacity:1}50%{opacity:.4}100%{opacity:1}}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(.85)}100%{transform:scale(1)}}@keyframes pulse-x{0%{transform:scaleX(1)}50%{transform:scaleX(.75)}100%{transform:scaleX(1)}}@keyframes pulse-y{0%{transform:scaleY(1)}50%{transform:scaleY(.75)}100%{transform:scaleY(1)}}@keyframes wave{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}.animation--fade{animation:fade 1.5s linear .5s infinite}.animation--wave::before{background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);background:linear-gradient(90deg,transparent,var(--gradient-color),transparent);animation:wave 1.5s linear .5s infinite}.animation--pulse-x{animation:pulse-x 1.5s linear .5s infinite}.animation--pulse-y{animation:pulse-y 1.5s linear .5s infinite}.animation--pulse{animation:pulse 1.5s linear .5s infinite}",
map: undefined,
media: undefined
});
};
/* scoped */
const __vue_scope_id__$2 = undefined;
/* module identifier */
const __vue_module_identifier__$2 = undefined;
/* functional template */
const __vue_is_functional_template__$2 = false;
/* style inject SSR */
/* style inject shadow dom */
const __vue_component__$2 = /*#__PURE__*/normalizeComponent({
render: __vue_render__$2,
staticRenderFns: __vue_staticRenderFns__$2
}, __vue_inject_styles__$2, __vue_script__$2, __vue_scope_id__$2, __vue_is_functional_template__$2, __vue_module_identifier__$2, false, createInjector, undefined, undefined);
// Import vue components
const install = function installSkeletonLoaderVue(Vue) {
if (install.installed) return;
install.installed = true;
Vue.component('skeleton-loader-vue', __vue_component__$2);
}; // Create module definition for Vue.use()
__vue_component__$2.install = install; // Export component by default
export default __vue_component__$2;