skeleton-loader-vue - npm Package Compare versions

Comparing version 1.0.8 to 1.0.9

dist/skeleton-loader-vue.esm.js

@@ -25,6 +25,2 @@ //
   computed: {
-    style() {
-      return `width: ${this.width}px; height: ${this.height}px; background-color: ${this.color}`;
-    },
-
     bindClass() {
@@ -34,3 +30,14 @@ 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);
   }
+
 };
@@ -178,5 +185,4 @@
   return _c('div', {
-    staticClass: "circle-loader",
-    class: _vm.bindClass,
-    style: _vm.style
+    staticClass: "loader loader--circle",
+    class: _vm.bindClass
   });
@@ -190,4 +196,4 @@ };
   if (!inject) return;
-  inject("data-v-5bdc6b08_0", {
-    source: ".circle-loader[data-v-5bdc6b08]{overflow:hidden;width:100px;height:100px;background-color:red;border-radius:50%;position:relative}.circle-loader[data-v-5bdc6b08]::before{content:\"\";display:block;position:absolute;left:0;right:0;bottom:0;top:0}",
+  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,
@@ -200,3 +206,3 @@ media: undefined
 
-const __vue_scope_id__ = "data-v-5bdc6b08";
+const __vue_scope_id__ = "data-v-c49d1d20";
 /* module identifier */
@@ -266,3 +272,16 @@
 
+  },
+
+  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);
   }
+
 };
@@ -283,4 +302,3 @@
     staticClass: "loader",
-    class: _vm.bindClass,
-    style: _vm.style
+    class: _vm.bindClass
   });
@@ -294,4 +312,4 @@ };
   if (!inject) return;
-  inject("data-v-390a0b15_0", {
-    source: ".loader[data-v-390a0b15]{overflow:hidden;position:relative}.loader[data-v-390a0b15]::before{content:\"\";display:block;position:absolute;left:0;right:0;bottom:0;top:0}.shape--text[data-v-390a0b15]{height:20px}.shape--round[data-v-390a0b15]{border-radius:8px}",
+  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,
@@ -304,3 +322,3 @@ media: undefined
 
-const __vue_scope_id__$1 = "data-v-390a0b15";
+const __vue_scope_id__$1 = "data-v-39eb697a";
 /* module identifier */
@@ -349,2 +367,5 @@
     },
+    waveColor: {
+      type: String
+    },
     rounded: {
@@ -376,3 +397,10 @@ type: Boolean,
 
+  },
+
+  mounted() {
+    if (this.waveColor) {
+      this.$el.style.setProperty('--gradient-color', this.waveColor);
+    }
   }
+
 };
@@ -391,5 +419,3 @@
 
-  return _c('div', {
-    staticClass: "loader"
-  }, [_vm.type === 'circle' ? _c('circle-loader', {
+  return _vm.type === 'circle' ? _c('circle-loader', {
     attrs: {
@@ -411,3 +437,3 @@ "width": _vm.loaderWidth,
     }
-  })], 1);
+  });
 };
@@ -420,4 +446,4 @@
   if (!inject) return;
-  inject("data-v-2d86da82_0", {
-    source: ".loader{width:fit-content;cursor:wait}@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);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}",
+  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,
@@ -424,0 +450,0 @@ media: undefined

dist/skeleton-loader-vue.min.js

@@ -1,1 +0,1 @@
-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:{style:function(){return"width: ".concat(this.width,"px; height: ").concat(this.height,"px; background-color: ").concat(this.color)},bindClass:function(){return"animation--".concat(this.animation)}}};function n(e,t,n,i,a,o,r,s,d,l){"boolean"!=typeof r&&(d=s,s=r,r=!1);const c="function"==typeof n?n.options:n;let u;if(e&&e.render&&(c.render=e.render,c.staticRenderFns=e.staticRenderFns,c._compiled=!0,a&&(c.functional=!0)),i&&(c._scopeId=i),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,n){return u.call(n),e(t,n)}}else{const e=c.beforeCreate;c.beforeCreate=e?[].concat(e,u):[u]}return n}const i="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());function a(e){return(e,t)=>function(e,t){const n=i?t.media||"default":e,a=r[n]||(r[n]={ids:new Set,styles:[]});if(!a.ids.has(e)){a.ids.add(e);let n=t.source;if(t.map&&(n+="\n/*# sourceURL="+t.map.sources[0]+" */",n+="\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(n),a.element.styleSheet.cssText=a.styles.filter(Boolean).join("\n");else{const e=a.ids.size-1,t=document.createTextNode(n),i=a.element.childNodes;i[e]&&a.element.removeChild(i[e]),i.length?a.element.insertBefore(t,i[e]):a.element.appendChild(t)}}}(e,t)}let o;const r={};var s=n({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"loader"},["circle"===e.type?n("circle-loader",{attrs:{width:e.loaderWidth,height:e.loaderHeight,animation:e.animation,color:e.color}}):n("square-loader",{attrs:{width:e.loaderWidth,height:e.loaderHeight,animation:e.animation,type:e.type,color:e.color,rounded:e.rounded,radius:e.radius}})],1)},staticRenderFns:[]},(function(e){e&&e("data-v-2d86da82_0",{source:".loader{width:fit-content;cursor:wait}@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);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:n({render:function(){var e=this.$createElement;return(this._self._c||e)("div",{staticClass:"circle-loader",class:this.bindClass,style:this.style})},staticRenderFns:[]},(function(e){e&&e("data-v-5bdc6b08_0",{source:'.circle-loader[data-v-5bdc6b08]{overflow:hidden;width:100px;height:100px;background-color:red;border-radius:50%;position:relative}.circle-loader[data-v-5bdc6b08]::before{content:"";display:block;position:absolute;left:0;right:0;bottom:0;top:0}',map:void 0,media:void 0})}),t,"data-v-5bdc6b08",!1,void 0,!1,a,void 0,void 0),SquareLoader:n({render:function(){var e=this.$createElement;return(this._self._c||e)("div",{staticClass:"loader",class:this.bindClass,style:this.style})},staticRenderFns:[]},(function(e){e&&e("data-v-390a0b15_0",{source:'.loader[data-v-390a0b15]{overflow:hidden;position:relative}.loader[data-v-390a0b15]::before{content:"";display:block;position:absolute;left:0;right:0;bottom:0;top:0}.shape--text[data-v-390a0b15]{height:20px}.shape--round[data-v-390a0b15]{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")}}},"data-v-390a0b15",!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)"},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}}},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}({});
+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}({});

dist/skeleton-loader-vue.ssr.js

@@ -25,8 +25,14 @@ 'use strict';Object.defineProperty(exports,'__esModule',{value:true});//
   computed: {
-    style: function style() {
-      return "width: ".concat(this.width, "px; height: ").concat(this.height, "px; background-color: ").concat(this.color);
-    },
     bindClass: function bindClass() {
       return "animation--".concat(this.animation);
     }
+  },
+  mounted: function mounted() {
+    var width = typeof this.width === 'number' ? "".concat(this.width, "px") : this.width;
+    var height = typeof this.width === 'number' ? "".concat(this.height, "px") : this.height;
+    var background = "".concat(this.color);
+    var loader = this.$el;
+    loader.style.setProperty('width', width);
+    loader.style.setProperty('height', height);
+    loader.style.setProperty('background-color', background);
   }
@@ -158,5 +164,4 @@ };function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
   return _c('div', {
-    staticClass: "circle-loader",
-    class: _vm.bindClass,
-    style: _vm.style
+    staticClass: "loader loader--circle",
+    class: _vm.bindClass
   }, []);
@@ -170,4 +175,4 @@ };
   if (!inject) return;
-  inject("data-v-5bdc6b08_0", {
-    source: ".circle-loader[data-v-5bdc6b08]{overflow:hidden;width:100px;height:100px;background-color:red;border-radius:50%;position:relative}.circle-loader[data-v-5bdc6b08]::before{content:\"\";display:block;position:absolute;left:0;right:0;bottom:0;top:0}",
+  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,
@@ -180,6 +185,6 @@ media: undefined
 
-var __vue_scope_id__ = "data-v-5bdc6b08";
+var __vue_scope_id__ = "data-v-c49d1d20";
 /* module identifier */
 
-var __vue_module_identifier__ = "data-v-5bdc6b08";
+var __vue_module_identifier__ = "data-v-c49d1d20";
 /* functional template */
@@ -240,2 +245,13 @@
     }
+  },
+  mounted: function mounted() {
+    var width = typeof this.width === 'number' ? "".concat(this.width, "px") : this.width;
+    var height = typeof this.width === 'number' ? "".concat(this.height, "px") : this.height;
+    var background = "".concat(this.color);
+    var borderRadius = this.rounded ? "".concat(this.radius, "px") : 0;
+    var 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);
   }
@@ -255,4 +271,3 @@ };/* script */
     staticClass: "loader",
-    class: _vm.bindClass,
-    style: _vm.style
+    class: _vm.bindClass
   }, []);
@@ -266,4 +281,4 @@ };
   if (!inject) return;
-  inject("data-v-390a0b15_0", {
-    source: ".loader[data-v-390a0b15]{overflow:hidden;position:relative}.loader[data-v-390a0b15]::before{content:\"\";display:block;position:absolute;left:0;right:0;bottom:0;top:0}.shape--text[data-v-390a0b15]{height:20px}.shape--round[data-v-390a0b15]{border-radius:8px}",
+  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,
@@ -276,6 +291,6 @@ media: undefined
 
-var __vue_scope_id__$1 = "data-v-390a0b15";
+var __vue_scope_id__$1 = "data-v-39eb697a";
 /* module identifier */
 
-var __vue_module_identifier__$1 = "data-v-390a0b15";
+var __vue_module_identifier__$1 = "data-v-39eb697a";
 /* functional template */
@@ -317,2 +332,5 @@
     },
+    waveColor: {
+      type: String
+    },
     rounded: {
@@ -342,2 +360,7 @@ type: Boolean,
     }
+  },
+  mounted: function mounted() {
+    if (this.waveColor) {
+      this.$el.style.setProperty('--gradient-color', this.waveColor);
+    }
   }
@@ -355,5 +378,3 @@ };/* script */
 
-  return _c('div', {
-    staticClass: "loader"
-  }, [_vm.type === 'circle' ? _c('circle-loader', {
+  return _vm.type === 'circle' ? _c('circle-loader', {
     attrs: {
@@ -375,3 +396,3 @@ "width": _vm.loaderWidth,
     }
-  })], 1);
+  });
 };
@@ -384,4 +405,4 @@
   if (!inject) return;
-  inject("data-v-2d86da82_0", {
-    source: ".loader{width:fit-content;cursor:wait}@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);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}",
+  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,
@@ -397,3 +418,3 @@ media: undefined
 
-var __vue_module_identifier__$2 = "data-v-2d86da82";
+var __vue_module_identifier__$2 = "data-v-28d24b2c";
 /* functional template */
@@ -400,0 +421,0 @@

package.json

 {
   "name": "skeleton-loader-vue",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "description": "A simple, customizable skeleton loader for your vue app",
@@ -5,0 +5,0 @@ "author": "Abdulqudus Abubakre <[e-mail]> (http://github.com/abdulqudus001)",

README.md

@@ -66,2 +66,3 @@ # skeleton-loader-vue
 |color|string|rgba(0,0,0,0.12)||The sets the color of the loader. It accepts all valid CSS colors (rgb, hsl, hex included)|
+|wave-color|string|rgba(0,0,0,0.12)||The sets the color of the wave. It accepts all valid CSS colors (rgb, hsl, hex included)|
 |rounded|boolean|false||Add this prop to give a non-circle loader a border-radius 0f 8px|
@@ -68,0 +69,0 @@ |radius|number,string|8||This is used to determine the border radius of the loader|

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

59048

increased by7.46%

Lines of code

823

increased by5.65%

Number of lines in readme file

91

increased by1.11%

No dependency changes