svelte-loading-spinners - npm Package Compare versions

Comparing version 0.0.5 to 0.0.6

dist/index.js

@@ -36,5 +36,2 @@ (function (global, factory) {
     }
-    function svg_element(name) {
-        return document.createElementNS('http://www.w3.org/2000/svg', name);
-    }
     function text(data) {
@@ -246,4 +243,4 @@ return document.createTextNode(data);
     	var style = element("style");
-    	style.id = "svelte-1yn8d6l-style";
-    	style.textContent = "svg.svelte-1yn8d6l.svelte-1yn8d6l{--offset:187;--duration:1.4s}.spinner.svelte-1yn8d6l.svelte-1yn8d6l{animation:svelte-1yn8d6l-circle-rotator var(--duration) linear infinite}.spinner.svelte-1yn8d6l .svelte-1yn8d6l{line-height:0;box-sizing:border-box}@keyframes svelte-1yn8d6l-circle-rotator{0%{transform:rotate(0deg)}100%{transform:rotate(270deg)}}.path.svelte-1yn8d6l.svelte-1yn8d6l{stroke-dasharray:var(--offset);stroke-dashoffset:0;transform-origin:center;animation:svelte-1yn8d6l-circle-dash var(--duration) ease-in-out infinite,\r\n      svelte-1yn8d6l-circle-colors calc(var(--duration) * 4) ease-in-out infinite}@keyframes svelte-1yn8d6l-circle-colors{0%{stroke:#676778}25%{stroke:#ff3e00}50%{stroke:#f7c223}75%{stroke:#41b883}100%{stroke:#40b3ff}}@keyframes svelte-1yn8d6l-circle-dash{0%{stroke-dashoffset:var(--offset)}50%{stroke-dashoffset:calc(var(--offset) / 4);transform:rotate(135deg)}100%{stroke-dashoffset:var(--offset);transform:rotate(450deg)}}";
+    	style.id = "svelte-1toslag-style";
+    	style.textContent = ".spinner--circle.svelte-1toslag{border-width:6px;border-style:solid;border-image:initial;border-radius:50%;animation:0.75s linear 0s infinite normal none running svelte-1toslag-rotate}@keyframes svelte-1toslag-rotate{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}";
     	append(document.head, style);
@@ -253,28 +250,16 @@ }
     function create_fragment(ctx) {
-    	let svg;
-    	let circle;
+    	let div;
 
     	return {
     		c() {
-    			svg = svg_element("svg");
-    			circle = svg_element("circle");
-    			attr(circle, "class", "path svelte-1yn8d6l");
-    			attr(circle, "fill", "none");
-    			attr(circle, "stroke-width", "6");
-    			attr(circle, "stroke-linecap", "round");
-    			attr(circle, "cx", "33");
-    			attr(circle, "cy", "33");
-    			attr(circle, "r", "30");
-    			attr(svg, "style", /*styles*/ ctx[0]);
-    			attr(svg, "class", "spinner spinner--circle svelte-1yn8d6l");
-    			attr(svg, "viewBox", "0 0 66 66");
-    			attr(svg, "xmlns", "http://www.w3.org/2000/svg");
+    			div = element("div");
+    			attr(div, "style", /*styles*/ ctx[0]);
+    			attr(div, "class", "spinner spinner--circle svelte-1toslag");
     		},
     		m(target, anchor) {
-    			insert(target, svg, anchor);
-    			append(svg, circle);
+    			insert(target, div, anchor);
     		},
     		p(ctx, [dirty]) {
     			if (dirty & /*styles*/ 1) {
-    				attr(svg, "style", /*styles*/ ctx[0]);
+    				attr(div, "style", /*styles*/ ctx[0]);
     			}
@@ -285,3 +270,3 @@ },
     		d(detaching) {
-    			if (detaching) detach(svg);
+    			if (detaching) detach(div);
     		}
@@ -292,6 +277,8 @@ };
     function instance($$self, $$props, $$invalidate) {
-    	let { size = "40px" } = $$props;
+    	let { size } = $$props;
+    	let { color } = $$props;
 
     	$$self.$set = $$props => {
     		if ("size" in $$props) $$invalidate(1, size = $$props.size);
+    		if ("color" in $$props) $$invalidate(2, color = $$props.color);
     	};
@@ -302,8 +289,13 @@
     	$$self.$$.update = () => {
-    		if ($$self.$$.dirty & /*size*/ 2) {
-    			 $$invalidate(0, styles = [`width: ${size}`, `height: ${size}`].join(";"));
+    		if ($$self.$$.dirty & /*size, color*/ 6) {
+    			 $$invalidate(0, styles = [
+    				`width: ${size}px`,
+    				`height: ${size}px`,
+    				`border-color: ${color}`,
+    				`border-color: ${color} transparent ${color} ${color}`
+    			].join(";"));
     		}
     	};
 
-    	return [styles, size];
+    	return [styles, size, color];
     }
@@ -314,4 +306,4 @@
     		super();
-    		if (!document.getElementById("svelte-1yn8d6l-style")) add_css();
-    		init(this, options, instance, create_fragment, safe_not_equal, { size: 1 });
+    		if (!document.getElementById("svelte-1toslag-style")) add_css();
+    		init(this, options, instance, create_fragment, safe_not_equal, { size: 1, color: 2 });
     	}
@@ -520,4 +512,4 @@ }
     function instance$3($$self, $$props, $$invalidate) {
-    	let { size = "40px" } = $$props;
-    	let { background = "#ff3e00" } = $$props;
+    	let { size } = $$props;
+    	let { color } = $$props;
     	let { duration = "2.0s" } = $$props;
@@ -527,3 +519,3 @@
     		if ("size" in $$props) $$invalidate(2, size = $$props.size);
-    		if ("background" in $$props) $$invalidate(3, background = $$props.background);
+    		if ("color" in $$props) $$invalidate(3, color = $$props.color);
     		if ("duration" in $$props) $$invalidate(4, duration = $$props.duration);
@@ -536,12 +528,12 @@ };
     	$$self.$$.update = () => {
-    		if ($$self.$$.dirty & /*background, duration*/ 24) {
-    			 $$invalidate(0, bounceStyle = [`background-color: ${background}`, `animation-duration: ${duration}`].join(";"));
+    		if ($$self.$$.dirty & /*color, duration*/ 24) {
+    			 $$invalidate(0, bounceStyle = [`background-color: ${color}`, `animation-duration: ${duration}`].join(";"));
     		}
 
     		if ($$self.$$.dirty & /*size*/ 4) {
-    			 $$invalidate(1, styles = [`width: ${size}`, `height: ${size}`].join(";"));
+    			 $$invalidate(1, styles = [`width: ${size}px`, `height: ${size}px`].join(";"));
     		}
     	};
 
-    	return [bounceStyle, styles, size, background, duration];
+    	return [bounceStyle, styles, size, color, duration];
     }
@@ -553,3 +545,3 @@
     		if (!document.getElementById("svelte-1pf8enx-style")) add_css$3();
-    		init(this, options, instance$3, create_fragment$3, safe_not_equal, { size: 2, background: 3, duration: 4 });
+    		init(this, options, instance$3, create_fragment$3, safe_not_equal, { size: 2, color: 3, duration: 4 });
     	}
@@ -653,4 +645,4 @@ }
     function instance$5($$self, $$props, $$invalidate) {
-    	let { size = "40px" } = $$props;
-    	let { background = "#ff3e00" } = $$props;
+    	let { size } = $$props;
+    	let { color } = $$props;
     	let { duration = "1.0s" } = $$props;
@@ -660,3 +652,3 @@
     		if ("size" in $$props) $$invalidate(1, size = $$props.size);
-    		if ("background" in $$props) $$invalidate(2, background = $$props.background);
+    		if ("color" in $$props) $$invalidate(2, color = $$props.color);
     		if ("duration" in $$props) $$invalidate(3, duration = $$props.duration);
@@ -668,7 +660,7 @@ };
     	$$self.$$.update = () => {
-    		if ($$self.$$.dirty & /*size, background, duration*/ 14) {
+    		if ($$self.$$.dirty & /*size, color, duration*/ 14) {
     			 $$invalidate(0, styles = [
-    				`width: ${size}`,
-    				`height: ${size}`,
-    				`background-color: ${background}`,
+    				`width: ${size}px`,
+    				`height: ${size}px`,
+    				`background-color: ${color}`,
     				`animation-duration: ${duration}`
@@ -679,3 +671,3 @@ ].join(";"));
 
-    	return [styles, size, background, duration];
+    	return [styles, size, color, duration];
     }
@@ -687,3 +679,3 @@
     		if (!document.getElementById("svelte-jl7wqf-style")) add_css$5();
-    		init(this, options, instance$5, create_fragment$5, safe_not_equal, { size: 1, background: 2, duration: 3 });
+    		init(this, options, instance$5, create_fragment$5, safe_not_equal, { size: 1, color: 2, duration: 3 });
     	}
@@ -736,4 +728,4 @@ }
     function instance$6($$self, $$props, $$invalidate) {
-    	let { size = "40px" } = $$props;
-    	let { color = "#ff3e00" } = $$props;
+    	let { size } = $$props;
+    	let { color } = $$props;
     	let { stroke = "5px" } = $$props;
@@ -753,3 +745,3 @@
     			 $$invalidate(0, lineStyles = [
-    				`width: ${size}`,
+    				`width: ${size}px`,
     				`height: ${stroke}`,
@@ -763,3 +755,3 @@ `background: ${color}`,
     			 $$invalidate(1, styles = [
-    				`width: ${size}`,
+    				`width: ${size}px`,
     				`height: ${stroke}`,
@@ -874,4 +866,4 @@ `transform: scale(${parseInt(size) / 75})`
     function instance$7($$self, $$props, $$invalidate) {
-    	let { size = "40px" } = $$props;
-    	let { background = "#ff3e00" } = $$props;
+    	let { size } = $$props;
+    	let { color } = $$props;
     	let { duration = "1.2s" } = $$props;
@@ -881,3 +873,3 @@
     		if ("size" in $$props) $$invalidate(2, size = $$props.size);
-    		if ("background" in $$props) $$invalidate(3, background = $$props.background);
+    		if ("color" in $$props) $$invalidate(3, color = $$props.color);
     		if ("duration" in $$props) $$invalidate(4, duration = $$props.duration);
@@ -890,12 +882,12 @@ };
     	$$self.$$.update = () => {
-    		if ($$self.$$.dirty & /*background, duration*/ 24) {
-    			 $$invalidate(0, rectStyles = [`background-color: ${background}`, `animation-duration: ${duration}`].join(";"));
+    		if ($$self.$$.dirty & /*color, duration*/ 24) {
+    			 $$invalidate(0, rectStyles = [`background-color: ${color}`, `animation-duration: ${duration}`].join(";"));
     		}
 
     		if ($$self.$$.dirty & /*size*/ 4) {
-    			 $$invalidate(1, styles = [`width: ${size}`, `height: ${size}`].join(";"));
+    			 $$invalidate(1, styles = [`width: ${size}px`, `height: ${size}px`].join(";"));
     		}
     	};
 
-    	return [rectStyles, styles, size, background, duration];
+    	return [rectStyles, styles, size, color, duration];
     }
@@ -907,6 +899,28 @@
     		if (!document.getElementById("svelte-6at4lk-style")) add_css$7();
-    		init(this, options, instance$7, create_fragment$7, safe_not_equal, { size: 2, background: 3, duration: 4 });
+    		init(this, options, instance$7, create_fragment$7, safe_not_equal, { size: 2, color: 3, duration: 4 });
     	}
     }
 
+    const calculateRgba = (input, opacity) => {
+      let color;
+      if (input[0] === `#`) {
+        color = input.slice(1);
+      }
+
+      if (color.length === 3) {
+        let res = ``;
+        color.split(``).forEach(c => {
+          res += c;
+          res += c;
+        });
+        color = res;
+      }
+
+      const rgbValues = color
+        .match(/.{2}/g)
+        .map(hex => parseInt(hex, 16))
+        .join(`, `);
+      return `rgba(${rgbValues}, ${opacity})`;
+    };
+
     /* src\BarLoader.svelte generated by Svelte v3.19.2 */
@@ -916,4 +930,4 @@
     	var style = element("style");
-    	style.id = "svelte-1kkcfep-style";
-    	style.textContent = ".wrapper.svelte-1kkcfep{position:relative;overflow:hidden;background-clip:padding-box}.small-line.svelte-1kkcfep{position:absolute;height:4px;overflow:hidden;background-clip:padding-box;display:block;border-radius:2px;will-change:left, right;animation-fill-mode:forwards}.small-line.one.svelte-1kkcfep{animation:2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) 0s infinite normal none running svelte-1kkcfep-long}.small-line.two.svelte-1kkcfep{animation:2.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.15s infinite normal none running svelte-1kkcfep-short}@keyframes svelte-1kkcfep-long{0%{left:-35%;right:100%}60%{left:100%;right:-90%}100%{left:100%;right:-90%}}@keyframes svelte-1kkcfep-short{0%{left:-200%;right:100%}60%{left:107%;right:-8%}100%{left:107%;right:-8%}}";
+    	style.id = "svelte-18g7eae-style";
+    	style.textContent = ".wrapper.svelte-18g7eae{position:relative;overflow:hidden;background-clip:padding-box}.small-line.svelte-18g7eae{position:absolute;overflow:hidden;background-clip:padding-box;display:block;border-radius:2px;will-change:left, right;animation-fill-mode:forwards}.small-line.one.svelte-18g7eae{animation:2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) 0s infinite normal none running svelte-18g7eae-long}.small-line.two.svelte-18g7eae{animation:2.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.15s infinite normal none running svelte-18g7eae-short}@keyframes svelte-18g7eae-long{0%{left:-35%;right:100%}60%{left:100%;right:-90%}100%{left:100%;right:-90%}}@keyframes svelte-18g7eae-short{0%{left:-200%;right:100%}60%{left:107%;right:-8%}100%{left:107%;right:-8%}}";
     	append(document.head, style);
@@ -935,7 +949,7 @@ }
     			attr(div0, "style", /*lineStyles*/ ctx[1]);
-    			attr(div0, "class", "small-line one svelte-1kkcfep");
+    			attr(div0, "class", "small-line one svelte-18g7eae");
     			attr(div1, "style", /*lineStyles*/ ctx[1]);
-    			attr(div1, "class", "small-line two svelte-1kkcfep");
+    			attr(div1, "class", "small-line two svelte-18g7eae");
     			attr(div2, "style", /*styles*/ ctx[0]);
-    			attr(div2, "class", "wrapper svelte-1kkcfep");
+    			attr(div2, "class", "wrapper svelte-18g7eae");
     		},
@@ -970,14 +984,8 @@ m(target, anchor) {
     function instance$8($$self, $$props, $$invalidate) {
-    	let { size = "40px" } = $$props;
-    	let { colorRgba = "rgba(255, 62, 0, 0.2)" } = $$props;
-    	let { color = "#ff3e00" } = $$props;
-    	let { height = "4px" } = $$props;
-    	let { width = "100px" } = $$props;
+    	let { size } = $$props;
+    	let { color } = $$props;
 
     	$$self.$set = $$props => {
     		if ("size" in $$props) $$invalidate(2, size = $$props.size);
-    		if ("colorRgba" in $$props) $$invalidate(3, colorRgba = $$props.colorRgba);
-    		if ("color" in $$props) $$invalidate(4, color = $$props.color);
-    		if ("height" in $$props) $$invalidate(5, height = $$props.height);
-    		if ("width" in $$props) $$invalidate(6, width = $$props.width);
+    		if ("color" in $$props) $$invalidate(3, color = $$props.color);
     	};
@@ -989,12 +997,16 @@
     	$$self.$$.update = () => {
-    		if ($$self.$$.dirty & /*height, width, colorRgba*/ 104) {
-    			 $$invalidate(0, styles = [`height: ${height}`, `width: ${width}`, `background-color: ${colorRgba}`].join(";"));
+    		if ($$self.$$.dirty & /*size, color*/ 12) {
+    			 $$invalidate(0, styles = [
+    				`height: ${size / 15}px`,
+    				`width: ${size * 2}px`,
+    				`background-color: ${calculateRgba(color, 0.2)}`
+    			].join(";"));
     		}
 
-    		if ($$self.$$.dirty & /*height, color*/ 48) {
-    			 $$invalidate(1, lineStyles = [`height: ${height}`, `background-color: ${color}`].join(";"));
+    		if ($$self.$$.dirty & /*size, color*/ 12) {
+    			 $$invalidate(1, lineStyles = [`height: ${size / 15}px`, `background-color: ${color}`].join(";"));
     		}
     	};
 
-    	return [styles, lineStyles, size, colorRgba, color, height, width];
+    	return [styles, lineStyles, size, color];
     }
@@ -1005,11 +1017,4 @@
     		super();
-    		if (!document.getElementById("svelte-1kkcfep-style")) add_css$8();
-
-    		init(this, options, instance$8, create_fragment$8, safe_not_equal, {
-    			size: 2,
-    			colorRgba: 3,
-    			color: 4,
-    			height: 5,
-    			width: 6
-    		});
+    		if (!document.getElementById("svelte-18g7eae-style")) add_css$8();
+    		init(this, options, instance$8, create_fragment$8, safe_not_equal, { size: 2, color: 3 });
     	}
@@ -1022,4 +1027,4 @@ }
     	var style = element("style");
-    	style.id = "svelte-yrk5gk-style";
-    	style.textContent = ".svelte-yrk5gk.svelte-yrk5gk{line-height:0;box-sizing:border-box}.spinner.svelte-yrk5gk>div.svelte-yrk5gk{background-color:rgb(255, 62, 0);border-radius:100%;animation-fill-mode:both;position:absolute;opacity:0;width:50px;height:50px;animation:svelte-yrk5gk-jumper 1s 0s linear infinite}.spinner.svelte-yrk5gk>div.svelte-yrk5gk:nth-child(2){animation-delay:0.33333s}.spinner.svelte-yrk5gk>div.svelte-yrk5gk:nth-child(3){animation-delay:0.66666s}@keyframes svelte-yrk5gk-jumper{0%{opacity:0;transform:scale(0)}5%{opacity:1}100%{opacity:0}}";
+    	style.id = "svelte-y1qqh6-style";
+    	style.textContent = ".svelte-y1qqh6.svelte-y1qqh6{line-height:0;box-sizing:border-box}.spinner.svelte-y1qqh6>div.svelte-y1qqh6{border-radius:100%;animation-fill-mode:both;position:absolute;opacity:0;width:50px;height:50px;animation:svelte-y1qqh6-jumper 1s 0s linear infinite}.spinner.svelte-y1qqh6>div.svelte-y1qqh6:nth-child(2){animation-delay:0.33333s}.spinner.svelte-y1qqh6>div.svelte-y1qqh6:nth-child(3){animation-delay:0.66666s}@keyframes svelte-y1qqh6-jumper{0%{opacity:0;transform:scale(0)}5%{opacity:1}100%{opacity:0}}";
     	append(document.head, style);
@@ -1044,7 +1049,10 @@ }
     			div2 = element("div");
-    			attr(div0, "class", "svelte-yrk5gk");
-    			attr(div1, "class", "svelte-yrk5gk");
-    			attr(div2, "class", "svelte-yrk5gk");
+    			attr(div0, "style", /*circles*/ ctx[1]);
+    			attr(div0, "class", "svelte-y1qqh6");
+    			attr(div1, "style", /*circles*/ ctx[1]);
+    			attr(div1, "class", "svelte-y1qqh6");
+    			attr(div2, "style", /*circles*/ ctx[1]);
+    			attr(div2, "class", "svelte-y1qqh6");
     			attr(div3, "style", /*styles*/ ctx[0]);
-    			attr(div3, "class", "spinner spinner--jumper svelte-yrk5gk");
+    			attr(div3, "class", "spinner spinner--jumper svelte-y1qqh6");
     		},
@@ -1060,2 +1068,14 @@ m(target, anchor) {
     		p(ctx, [dirty]) {
+    			if (dirty & /*circles*/ 2) {
+    				attr(div0, "style", /*circles*/ ctx[1]);
+    			}
+
+    			if (dirty & /*circles*/ 2) {
+    				attr(div1, "style", /*circles*/ ctx[1]);
+    			}
+
+    			if (dirty & /*circles*/ 2) {
+    				attr(div2, "style", /*circles*/ ctx[1]);
+    			}
+
     			if (dirty & /*styles*/ 1) {
@@ -1074,17 +1094,24 @@ attr(div3, "style", /*styles*/ ctx[0]);
     function instance$9($$self, $$props, $$invalidate) {
-    	let { size = "40px" } = $$props;
+    	let { size } = $$props;
+    	let { color } = $$props;
 
     	$$self.$set = $$props => {
-    		if ("size" in $$props) $$invalidate(1, size = $$props.size);
+    		if ("size" in $$props) $$invalidate(2, size = $$props.size);
+    		if ("color" in $$props) $$invalidate(3, color = $$props.color);
     	};
 
     	let styles;
+    	let circles;
 
     	$$self.$$.update = () => {
-    		if ($$self.$$.dirty & /*size*/ 2) {
-    			 $$invalidate(0, styles = [`width: ${size}`, `height: ${size}`].join(";"));
+    		if ($$self.$$.dirty & /*size*/ 4) {
+    			 $$invalidate(0, styles = [`width: ${size}px`, `height: ${size}px`].join(";"));
     		}
+
+    		if ($$self.$$.dirty & /*color*/ 8) {
+    			 $$invalidate(1, circles = [`background-color: ${color}`]);
+    		}
     	};
 
-    	return [styles, size];
+    	return [styles, circles, size, color];
     }
@@ -1095,4 +1122,4 @@
     		super();
-    		if (!document.getElementById("svelte-yrk5gk-style")) add_css$9();
-    		init(this, options, instance$9, create_fragment$9, safe_not_equal, { size: 1 });
+    		if (!document.getElementById("svelte-y1qqh6-style")) add_css$9();
+    		init(this, options, instance$9, create_fragment$9, safe_not_equal, { size: 2, color: 3 });
     	}
@@ -1105,4 +1132,4 @@ }
     	var style = element("style");
-    	style.id = "svelte-frk60h-style";
-    	style.textContent = ".svelte-frk60h.svelte-frk60h{position:relative}.svelte-frk60h>div.svelte-frk60h{position:absolute;top:0px;left:0px;width:60px;height:60px;opacity:0.4;perspective:800px;border-width:6px;border-style:solid;border-color:rgb(54, 215, 183);border-image:initial;border-radius:100%}.svelte-frk60h>div.svelte-frk60h:nth-child(1){animation:2s linear 0s infinite normal none running svelte-frk60h-ring-one}.svelte-frk60h>div.svelte-frk60h:nth-child(2){animation:2s linear 0s infinite normal none running svelte-frk60h-ring-two}@keyframes svelte-frk60h-ring-one{0%{transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg)}100%{transform:rotateX(360deg) rotateY(180deg) rotateZ(360deg)}}@keyframes svelte-frk60h-ring-two{0%{transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg)}100%{transform:rotateX(180deg) rotateY(360deg) rotateZ(360deg)}}";
+    	style.id = "svelte-rkxq48-style";
+    	style.textContent = ".svelte-rkxq48.svelte-rkxq48{position:relative}.svelte-rkxq48>div.svelte-rkxq48{position:absolute;top:0px;left:0px;width:60px;height:60px;opacity:0.4;perspective:800px;border-width:6px;border-style:solid;border-image:initial;border-radius:100%}.svelte-rkxq48>div.svelte-rkxq48:nth-child(1){animation:2s linear 0s infinite normal none running svelte-rkxq48-ring-one}.svelte-rkxq48>div.svelte-rkxq48:nth-child(2){animation:2s linear 0s infinite normal none running svelte-rkxq48-ring-two}@keyframes svelte-rkxq48-ring-one{0%{transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg)}100%{transform:rotateX(360deg) rotateY(180deg) rotateZ(360deg)}}@keyframes svelte-rkxq48-ring-two{0%{transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg)}100%{transform:rotateX(180deg) rotateY(360deg) rotateZ(360deg)}}";
     	append(document.head, style);
@@ -1124,7 +1151,7 @@ }
     			attr(div0, "style", /*ringOne*/ ctx[1]);
-    			attr(div0, "class", "svelte-frk60h");
+    			attr(div0, "class", "svelte-rkxq48");
     			attr(div1, "style", /*ringTwo*/ ctx[2]);
-    			attr(div1, "class", "svelte-frk60h");
+    			attr(div1, "class", "svelte-rkxq48");
     			attr(div2, "style", /*styles*/ ctx[0]);
-    			attr(div2, "class", "ringloader svelte-frk60h");
+    			attr(div2, "class", "ringloader svelte-rkxq48");
     		},
@@ -1159,8 +1186,8 @@ m(target, anchor) {
     function instance$a($$self, $$props, $$invalidate) {
-    	let { size = "40px" } = $$props;
-    	let { background = "#ff3e00" } = $$props;
+    	let { size } = $$props;
+    	let { color } = $$props;
 
     	$$self.$set = $$props => {
     		if ("size" in $$props) $$invalidate(3, size = $$props.size);
-    		if ("background" in $$props) $$invalidate(4, background = $$props.background);
+    		if ("color" in $$props) $$invalidate(4, color = $$props.color);
     	};
@@ -1174,15 +1201,15 @@
     		if ($$self.$$.dirty & /*size*/ 8) {
-    			 $$invalidate(0, styles = [`width: ${size}`, `height: ${size}`].join(";"));
+    			 $$invalidate(0, styles = [`width: ${size}px`, `height: ${size}px`].join(";"));
     		}
 
-    		if ($$self.$$.dirty & /*background*/ 16) {
-    			 $$invalidate(1, ringOne = [`border-color: ${background}`].join(";"));
+    		if ($$self.$$.dirty & /*color*/ 16) {
+    			 $$invalidate(1, ringOne = [`border-color: ${color}`].join(";"));
     		}
 
-    		if ($$self.$$.dirty & /*background*/ 16) {
-    			 $$invalidate(2, ringTwo = [`border-color: ${background}`].join(";"));
+    		if ($$self.$$.dirty & /*color*/ 16) {
+    			 $$invalidate(2, ringTwo = [`border-color: ${color}`].join(";"));
     		}
     	};
 
-    	return [styles, ringOne, ringTwo, size, background];
+    	return [styles, ringOne, ringTwo, size, color];
     }
@@ -1193,4 +1220,4 @@
     		super();
-    		if (!document.getElementById("svelte-frk60h-style")) add_css$a();
-    		init(this, options, instance$a, create_fragment$a, safe_not_equal, { size: 3, background: 4 });
+    		if (!document.getElementById("svelte-rkxq48-style")) add_css$a();
+    		init(this, options, instance$a, create_fragment$a, safe_not_equal, { size: 3, color: 4 });
     	}
@@ -1203,4 +1230,4 @@ }
     	var style = element("style");
-    	style.id = "svelte-1evm0h0-style";
-    	style.textContent = "div.svelte-1evm0h0{display:inline-block;border-radius:100%;box-sizing:content-box}div.svelte-1evm0h0:nth-child(1){animation:0.6s ease-in-out 0.07s infinite normal both running svelte-1evm0h0-sync}div.svelte-1evm0h0:nth-child(2){animation:0.6s ease-in-out 0.14s infinite normal both running svelte-1evm0h0-sync}div.svelte-1evm0h0:nth-child(3){animation:0.6s ease-in-out 0.21s infinite normal both running svelte-1evm0h0-sync}@keyframes svelte-1evm0h0-sync{33%{transform:translateY(10px)}66%{transform:translateY(-10px)}100%{transform:translateY(0)}}";
+    	style.id = "svelte-9wc7dw-style";
+    	style.textContent = "div.svelte-9wc7dw{display:inline-block;border-radius:100%;box-sizing:content-box}div.svelte-9wc7dw:nth-child(1){animation:0.6s ease-in-out 0.07s infinite normal both running svelte-9wc7dw-sync}div.svelte-9wc7dw:nth-child(2){animation:0.6s ease-in-out 0.14s infinite normal both running svelte-9wc7dw-sync}div.svelte-9wc7dw:nth-child(3){animation:0.6s ease-in-out 0.21s infinite normal both running svelte-9wc7dw-sync}@keyframes svelte-9wc7dw-sync{33%{transform:translateY(10px)}66%{transform:translateY(-10px)}100%{transform:translateY(0)}}";
     	append(document.head, style);
@@ -1210,2 +1237,3 @@ }
     function create_fragment$b(ctx) {
+    	let div3;
     	let div0;
@@ -1219,2 +1247,3 @@ let t0;
     		c() {
+    			div3 = element("div");
     			div0 = element("div");
@@ -1226,14 +1255,16 @@ t0 = space();
     			attr(div0, "style", /*styles*/ ctx[0]);
-    			attr(div0, "class", "svelte-1evm0h0");
+    			attr(div0, "class", "svelte-9wc7dw");
     			attr(div1, "style", /*styles*/ ctx[0]);
-    			attr(div1, "class", "svelte-1evm0h0");
+    			attr(div1, "class", "svelte-9wc7dw");
     			attr(div2, "style", /*styles*/ ctx[0]);
-    			attr(div2, "class", "svelte-1evm0h0");
+    			attr(div2, "class", "svelte-9wc7dw");
+    			attr(div3, "class", "svelte-9wc7dw");
     		},
     		m(target, anchor) {
-    			insert(target, div0, anchor);
-    			insert(target, t0, anchor);
-    			insert(target, div1, anchor);
-    			insert(target, t1, anchor);
-    			insert(target, div2, anchor);
+    			insert(target, div3, anchor);
+    			append(div3, div0);
+    			append(div3, t0);
+    			append(div3, div1);
+    			append(div3, t1);
+    			append(div3, div2);
     		},
@@ -1256,7 +1287,3 @@ p(ctx, [dirty]) {
     		d(detaching) {
-    			if (detaching) detach(div0);
-    			if (detaching) detach(t0);
-    			if (detaching) detach(div1);
-    			if (detaching) detach(t1);
-    			if (detaching) detach(div2);
+    			if (detaching) detach(div3);
     		}
@@ -1267,4 +1294,4 @@ };
     function instance$b($$self, $$props, $$invalidate) {
-    	let { size = "15px" } = $$props;
-    	let { color = "#ff3e00" } = $$props;
+    	let { size } = $$props;
+    	let { color } = $$props;
     	let { margin = "1px" } = $$props;
@@ -1283,4 +1310,4 @@
     			 $$invalidate(0, styles = [
-    				`height: ${size}`,
-    				`width: ${size}`,
+    				`height: ${size}px`,
+    				`width: ${size}px`,
     				`background-color: ${color}`,
@@ -1298,3 +1325,3 @@ `margin: ${margin}`
     		super();
-    		if (!document.getElementById("svelte-1evm0h0-style")) add_css$b();
+    		if (!document.getElementById("svelte-9wc7dw-style")) add_css$b();
     		init(this, options, instance$b, create_fragment$b, safe_not_equal, { size: 1, color: 2, margin: 3 });
@@ -1304,2 +1331,85 @@ }
 
+    /* src\Rainbow.svelte generated by Svelte v3.19.2 */
+
+    function add_css$c() {
+    	var style = element("style");
+    	style.id = "svelte-ldp1ps-style";
+    	style.textContent = ".rainbow.svelte-ldp1ps{border-left-color:transparent;border-bottom-color:transparent;box-sizing:border-box;transform:rotate(-200deg);border-radius:50%;border-style:solid;animation:3s ease-in-out 0s infinite normal none running svelte-ldp1ps-rotate}@keyframes svelte-ldp1ps-rotate{0%{border-width:10px}25%{border-width:3px}50%{transform:rotate(115deg);border-width:10px}75%{border-width:3px}100%{border-width:10px}}";
+    	append(document.head, style);
+    }
+
+    function create_fragment$c(ctx) {
+    	let div1;
+    	let div0;
+    	let div0_style_value;
+
+    	return {
+    		c() {
+    			div1 = element("div");
+    			div0 = element("div");
+    			attr(div0, "style", div0_style_value = [/*border*/ ctx[1] + /*wrapper*/ ctx[2]]);
+    			attr(div0, "class", "rainbow svelte-ldp1ps");
+    			attr(div1, "style", /*styles*/ ctx[0]);
+    			attr(div1, "class", "rainbow-wrapper");
+    		},
+    		m(target, anchor) {
+    			insert(target, div1, anchor);
+    			append(div1, div0);
+    		},
+    		p(ctx, [dirty]) {
+    			if (dirty & /*border, wrapper*/ 6 && div0_style_value !== (div0_style_value = [/*border*/ ctx[1] + /*wrapper*/ ctx[2]])) {
+    				attr(div0, "style", div0_style_value);
+    			}
+
+    			if (dirty & /*styles*/ 1) {
+    				attr(div1, "style", /*styles*/ ctx[0]);
+    			}
+    		},
+    		i: noop,
+    		o: noop,
+    		d(detaching) {
+    			if (detaching) detach(div1);
+    		}
+    	};
+    }
+
+    function instance$c($$self, $$props, $$invalidate) {
+    	let { size } = $$props;
+    	let { color } = $$props;
+    	console.log(`${size / 2}`);
+
+    	$$self.$set = $$props => {
+    		if ("size" in $$props) $$invalidate(3, size = $$props.size);
+    		if ("color" in $$props) $$invalidate(4, color = $$props.color);
+    	};
+
+    	let styles;
+    	let border;
+    	let wrapper;
+
+    	$$self.$$.update = () => {
+    		if ($$self.$$.dirty & /*size*/ 8) {
+    			 $$invalidate(0, styles = [`width: ${size}px`, `height: ${size / 2}px`, `overflow: hidden`].join(";"));
+    		}
+
+    		if ($$self.$$.dirty & /*color*/ 16) {
+    			 $$invalidate(1, border = [`border-top-color: ${color}`, `border-right-color: ${color};`].join(";"));
+    		}
+
+    		if ($$self.$$.dirty & /*size*/ 8) {
+    			 $$invalidate(2, wrapper = [`width: ${size}px`, `height: ${size}px`].join(";"));
+    		}
+    	};
+
+    	return [styles, border, wrapper, size, color];
+    }
+
+    class Rainbow extends SvelteComponent {
+    	constructor(options) {
+    		super();
+    		if (!document.getElementById("svelte-ldp1ps-style")) add_css$c();
+    		init(this, options, instance$c, create_fragment$c, safe_not_equal, { size: 3, color: 4 });
+    	}
+    }
+
     exports.BarLoader = BarLoader;
@@ -1312,2 +1422,3 @@ exports.Circle = Circle;
     exports.Jumper = Jumper;
+    exports.Rainbow = Rainbow;
     exports.RingLoader = RingLoader;
@@ -1314,0 +1425,0 @@ exports.ScaleOut = ScaleOut;

package.json

 {
   "name": "svelte-loading-spinners",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "svelte": "src/index.js",
@@ -5,0 +5,0 @@ "module": "dist/index.mjs",

README.md

@@ -40,2 +40,3 @@ # svelte-loading-spinners
 SyncLoader
+Rainbow
 ```
@@ -42,0 +43,0 @@

src/index.js

@@ -13,2 +13,3 @@ import Circle from "./Circle.svelte";
 import SyncLoader from "./SyncLoader.svelte";
+import Rainbow from "./Rainbow.svelte";
 
@@ -27,3 +28,4 @@ export {
   RingLoader,
-  SyncLoader
+  SyncLoader,
+  Rainbow
 };

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

116023

increased by4.53%

Number of package files

20

increased by11.11%

Lines of code

2531

increased by9.19%

Number of lines in readme file

48

increased by2.13%

No dependency changes