skeleton-loader-vue/dist/skeleton-loader-vue.min.js

A simple, customizable skeleton loader for your vue app

var SkeletonLoaderVue=function(e){"use strict";var t={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:function(){return"animation--".concat(this.animation)}},mounted:function(){var e="number"==typeof this.width?"".concat(this.width,"px"):this.width,t="number"==typeof this.width?"".concat(this.height,"px"):this.height,i="".concat(this.color),n=this.$el;n.style.setProperty("width",e),n.style.setProperty("height",t),n.style.setProperty("background-color",i)}};function i(e,t,i,n,a,o,r,s,d,l){"boolean"!=typeof r&&(d=s,s=r,r=!1);const c="function"==typeof i?i.options:i;let u;if(e&&e.render&&(c.render=e.render,c.staticRenderFns=e.staticRenderFns,c._compiled=!0,a&&(c.functional=!0)),n&&(c._scopeId=n),o?(u=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),t&&t.call(this,d(e)),e&&e._registeredComponents&&e._registeredComponents.add(o)},c._ssrRegister=u):t&&(u=r?function(e){t.call(this,l(e,this.$root.$options.shadowRoot))}:function(e){t.call(this,s(e))}),u)if(c.functional){const e=c.render;c.render=function(t,i){return u.call(i),e(t,i)}}else{const e=c.beforeCreate;c.beforeCreate=e?[].concat(e,u):[u]}return i}const n="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());function a(e){return(e,t)=>function(e,t){const i=n?t.media||"default":e,a=r[i]||(r[i]={ids:new Set,styles:[]});if(!a.ids.has(e)){a.ids.add(e);let i=t.source;if(t.map&&(i+="\n/*# sourceURL="+t.map.sources[0]+" */",i+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(t.map))))+" */"),a.element||(a.element=document.createElement("style"),a.element.type="text/css",t.media&&a.element.setAttribute("media",t.media),void 0===o&&(o=document.head||document.getElementsByTagName("head")[0]),o.appendChild(a.element)),"styleSheet"in a.element)a.styles.push(i),a.element.styleSheet.cssText=a.styles.filter(Boolean).join("\n");else{const e=a.ids.size-1,t=document.createTextNode(i),n=a.element.childNodes;n[e]&&a.element.removeChild(n[e]),n.length?a.element.insertBefore(t,n[e]):a.element.appendChild(t)}}}(e,t)}let o;const r={};var s=i({render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return"circle"===e.type?i("circle-loader",{attrs:{width:e.loaderWidth,height:e.loaderHeight,animation:e.animation,color:e.color}}):i("square-loader",{attrs:{width:e.loaderWidth,height:e.loaderHeight,animation:e.animation,type:e.type,color:e.color,rounded:e.rounded,radius:e.radius}})},staticRenderFns:[]},(function(e){e&&e("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:void 0,media:void 0})}),{components:{CircleLoader:i({render:function(){var e=this.$createElement;return(this._self._c||e)("div",{staticClass:"loader loader--circle",class:this.bindClass})},staticRenderFns:[]},(function(e){e&&e("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:void 0,media:void 0})}),t,"data-v-c49d1d20",!1,void 0,!1,a,void 0,void 0),SquareLoader:i({render:function(){var e=this.$createElement;return(this._self._c||e)("div",{staticClass:"loader",class:this.bindClass})},staticRenderFns:[]},(function(e){e&&e("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:void 0,media:void 0})}),{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:!1},radius:{type:[Number,String],default:0}},computed:{style:function(){return{width:"number"==typeof this.width?"".concat(this.width,"px"):this.width,height:"number"==typeof this.width?"".concat(this.height,"px"):this.height,"background-color":"".concat(this.color),"border-radius":this.rounded?"".concat(this.radius,"px"):0}},bindClass:function(){return"animation--".concat(this.animation," shape--").concat(this.type," shape--").concat(this.rounded?"round":"flat")}},mounted:function(){var e="number"==typeof this.width?"".concat(this.width,"px"):this.width,t="number"==typeof this.width?"".concat(this.height,"px"):this.height,i="".concat(this.color),n=this.rounded?"".concat(this.radius,"px"):0,a=this.$el;a.style.setProperty("width",e),a.style.setProperty("height",t),a.style.setProperty("background-color",i),a.style.setProperty("border-radius",n)}},"data-v-39eb697a",!1,void 0,!1,a,void 0,void 0)},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:!1},radius:{type:[Number,String],default:8}},computed:{loaderWidth:function(){return this.size?this.size:this.width},loaderHeight:function(){return this.size?this.size:this.height}},mounted:function(){this.waveColor&&this.$el.style.setProperty("--gradient-color",this.waveColor)}},void 0,!1,void 0,!1,a,void 0,void 0),d=function(e){d.installed||(d.installed=!0,e.component("skeleton-loader-vue",s))},l={install:d},c=null;return"undefined"!=typeof window?c=window.Vue:"undefined"!=typeof global&&(c=global.Vue),c&&c.use(l),s.install=d,e.default=s,e}({});