@ayush-2002/load-it - npm Package Compare versions

Comparing version 0.0.2 to 1.0.0

dist/cjs/index.js

@@ -1,2 +0,2 @@
-"use strict";var e=require("react");exports.Loading=({loading:l=!0})=>l?e.createElement("div",null,"Loading...."):null,exports.Skeleton=({loading:l=!0})=>l?e.createElement("div",null,"Loading...."):null;
+"use strict";var r=require("react");function e(r){if(!r)return null;if(r.startsWith("#")){const e=function(r){const e=r.match(/[A-Fa-f0-9]{2}/g);if(e)return e.map((r=>parseInt(r,16)));return null}(4===r.length?r.slice(1).split("").map((r=>r+r)).join(""):r);if(e)return`rgba(${e.join(", ")}, 1)`;console.warn(`Invalid hex code format: ${r}`)}else if(r.startsWith("rgb")){const e=function(r){const e=r.indexOf("("),n=r.indexOf(")");if(-1!==e&&-1!==n){const i=r.slice(e+1,n).split(",").map((r=>parseFloat(r.trim())));if(i.length>=3&&i.length<=4){return{rgb:i.slice(0,3),opacity:i[3]||1}}}return null}(r);if(e)return`rgba(${e.rgb.join(", ")}, ${e.opacity})`;console.warn(`Invalid rgb format: ${r}`)}else console.warn(`Invalid color format: ${r}`);return r}function n(r){if(!r)return"";if(r.startsWith("rgb")||r.startsWith("rgba")){const e=r.match(/\d+/g);if(e&&3===e.length)return`${e.join(", ")}`;if(e&&4===e.length){const r=e.join(", "),n=r.lastIndexOf(",");return r.slice(0,n)}}r.startsWith("#")&&(r=r.slice(1));return`${parseInt(r.substring(0,2),16)}, ${parseInt(r.substring(2,4),16)}, ${parseInt(r.substring(4,6),16)}`}function i(r){const e=/[A-Za-z%]+$/;return e||console.warn(`${r} check the unit or add a unit `),e.test(r)}!function(r,e){void 0===e&&(e={});var n=e.insertAt;if(r&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===n&&i.firstChild?i.insertBefore(a,i.firstChild):i.appendChild(a),a.styleSheet?a.styleSheet.cssText=r:a.appendChild(document.createTextNode(r))}}(':root {\n  --base: #263238;\n  --primary: #b5b5b5;\n  --primary-rgb: 181, 181, 181;\n  --secondary: #ff3d00;\n  --size: 48px;\n  --speedMultiplier: 1;\n}\n.circle-loader {\n  width: var(--size);\n  height: var(--size);\n  border: calc(var(--size) - var(--size) * 0.9) solid var(--primary);\n  border-bottom-color: var(--secondary);\n  border-radius: 50%;\n  display: inline-block;\n  animation: rotation calc(1s / var(--speedMultiplier)) linear infinite;\n}\n\n.circle-in-loader {\n  width: var(--size);\n  height: var(--size);\n  border: calc(var(--size) - var(--size) * 0.9) solid var(--primary);\n  border-radius: 50%;\n  display: inline-block;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.circle-in-loader::before {\n  content: "";\n  width: calc(var(--size) - calc(var(--size) * 0.3));\n  height: calc(var(--size) - calc(var(--size) * 0.3));\n  border-radius: 50%;\n  border: calc(var(--size) - var(--size) * 0.9) solid transparent;\n  border-bottom-color: var(--secondary);\n  animation: rotation calc(1s / var(--speedMultiplier)) linear infinite;\n}\n\n.electron-loader {\n  width: var(--size);\n  height: var(--size);\n  border: calc(var(--size) - var(--size) * 0.9) solid var(--primary);\n  border-radius: 50%;\n  display: inline-block;\n  position: relative;\n  animation: rotation calc(1s / var(--speedMultiplier)) linear infinite;\n}\n.electron-loader::after {\n  content: "";\n  position: absolute;\n  left: 0;\n  top: 0;\n  background: var(--secondary);\n  width: calc(var(--size) / 3);\n  height: calc(var(--size) / 3);\n  transform: translate(-50%, 50%);\n  border-radius: 50%;\n}\n\n.multicircle-loader {\n  width: var(--size);\n  height: var(--size);\n  border-radius: 50%;\n  display: inline-block;\n  position: relative;\n  border: calc(var(--size) - var(--size) * 0.9) solid;\n  border-color: var(--primary) var(--primary) transparent transparent;\n  animation: rotation calc(1s / var(--speedMultiplier)) linear infinite;\n}\n.multicircle-loader::after,\n.multicircle-loader::before {\n  content: "";\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  margin: auto;\n  border: calc(var(--size) - var(--size) * 0.9) solid;\n  border-color: transparent transparent var(--secondary) var(--secondary);\n  width: calc(var(--size) - calc(var(--size) * 0.6));\n  height: calc(var(--size) - calc(var(--size) * 0.6));\n  border-radius: 50%;\n  animation: rotationBack calc(0.5s / var(--speedMultiplier)) linear infinite;\n  transform-origin: center center;\n}\n.multicircle-loader::before {\n  width: calc(var(--size) - calc(var(--size) * 0.3));\n  height: calc(var(--size) - calc(var(--size) * 0.3));\n  border-color: var(--primary) var(--primary) transparent transparent;\n  animation: rotation calc(1.5s / var(--speedMultiplier)) linear infinite;\n}\n\n.double-dotted-circle-loader {\n  width: var(--size);\n  height: var(--size);\n  border: calc(var(--size) * 1.07 - var(--size)) dotted var(--primary);\n  border-style: solid solid dotted dotted;\n  border-radius: 50%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  animation: rotation calc(2s / var(--speedMultiplier)) linear infinite;\n}\n.double-dotted-circle-loader::after {\n  content: "";\n  margin: auto;\n  border: calc(var(--size) * 1.07 - var(--size)) dotted var(--secondary);\n  border-style: solid solid dotted;\n  width: calc(var(--size) / 2);\n  height: calc(var(--size) / 2);\n  border-radius: 50%;\n  animation: rotationBack calc(1s / var(--speedMultiplier)) linear infinite;\n  transform-origin: center center;\n}\n\n.timer-loader {\n  width: var(--size);\n  height: var(--size);\n  border: calc(var(--size) * 1.07 - var(--size)) solid var(--primary);\n  border-radius: 50%;\n  display: inline-block;\n  position: relative;\n  z-index: -1;\n  animation: rotation calc(1s / var(--speedMultiplier)) linear infinite;\n}\n.timer-loader::after {\n  content: "";\n  z-index: 2;\n  position: absolute;\n  left: 50%;\n  top: 0;\n  background: var(--secondary);\n  width: calc(var(--size) * 1.07 - var(--size));\n  height: calc(var(--size) / 2);\n  transform: translateX(-50%);\n}\n\n.ring-loader {\n  width: var(--size);\n  height: var(--size);\n  border-radius: 50%;\n  display: inline-block;\n  border-top: calc(var(--size) * 1.08 - var(--size)) solid var(--secondary);\n  border-right: calc(var(--size) * 1.08 - var(--size)) solid transparent;\n  opacity: 0.8;\n  animation: rotation calc(1s / var(--speedMultiplier)) linear infinite;\n}\n\n.dual-ring-loader {\n  width: var(--size);\n  height: var(--size);\n  border-radius: 50%;\n  display: inline-block;\n  border-top: calc(var(--size) * 1.08 - var(--size)) solid var(--primary);\n  border-right: calc(var(--size) * 1.08 - var(--size)) solid transparent;\n  animation: rotation calc(1s / var(--speedMultiplier)) linear infinite;\n}\n.dual-ring-loader::after {\n  content: "";\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: var(--size);\n  height: var(--size);\n  border-radius: 50%;\n  border-bottom: calc(var(--size) * 1.08 - var(--size)) solid var(--secondary);\n  border-left: calc(var(--size) * 1.08 - var(--size)) solid transparent;\n}\n\n.circle-pulse-loader {\n  width: var(--size);\n  height: var(--size);\n  border-radius: 50%;\n  display: inline-block;\n  position: relative;\n  border: calc(var(--size) - var(--size) * 0.8) solid var(--secondary);\n  animation: circlePulse calc(1s / var(--speedMultiplier)) linear infinite\n    alternate;\n}\n\n@keyframes rotation {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n@keyframes rotationBack {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(-360deg);\n  }\n}\n\n@keyframes circlePulse {\n  0% {\n    border-color: rgba(var(--primary-rgb), 1) rgba(var(--primary-rgb), 0)\n      rgba(var(--primary-rgb), 0) rgba(var(--primary-rgb), 0);\n  }\n  33% {\n    border-color: rgba(var(--primary-rgb), 1) rgba(var(--primary-rgb), 1)\n      rgba(var(--primary-rgb), 0) rgba(var(--primary-rgb), 0);\n  }\n  66% {\n    border-color: rgba(var(--primary-rgb), 1) rgba(var(--primary-rgb), 1)\n      rgba(var(--primary-rgb), 1) rgba(var(--primary-rgb), 0);\n  }\n  100% {\n    border-color: rgba(var(--primary-rgb), 1) rgba(var(--primary-rgb), 1)\n      rgba(var(--primary-rgb), 1) rgba(var(--primary-rgb), 1);\n  }\n}\n');exports.CircleInLoader=({loading:n=!0,primary:a="#B5B5B5",secondary:t="#ff3d00",size:s="48px",speedMultiplier:l=1,cssOverride:o={}})=>{if(!n)return null;""===s&&(s="48px"),i(s)||(s=`${s}px`),0===l&&(l=1);const c=Object.assign({"--size":s,"--primary":e(a),"--secondary":e(t),"--speedMultiplier":l},o);return r.createElement("div",{className:"circle-in-loader",style:c})},exports.CircleLoader=({loading:n=!0,primary:a="#B5B5B5",secondary:t="#ff3d00",size:s="48px",speedMultiplier:l=1,cssOverride:o={}})=>{if(!n)return null;""===s&&(s="48px"),i(s)||(s=`${s}px`),0===l&&(l=1);const c=Object.assign({"--size":s,"--primary":e(a),"--secondary":e(t),"--speedMultiplier":l},o);return r.createElement("div",{className:"circle-loader",style:c})},exports.CirclePulseLoader=({loading:a=!0,primary:t="#B5B5B5",size:s="48px",speedMultiplier:l=1,cssOverride:o={}})=>{if(!a)return null;""===s&&(s="48px"),i(s)||(s=`${s}px`),0===l&&(l=1);const c=Object.assign({"--size":s,"--primary-rgb":n(e(t)),"--speedMultiplier":l},o);return r.createElement("div",{className:"circle-pulse-loader",style:c})},exports.DoubleDotCircleLoader=({loading:n=!0,primary:a="#B5B5B5",secondary:t="#ff3d00",size:s="48px",speedMultiplier:l=1,cssOverride:o={}})=>{if(!n)return null;""===s&&(s="48px"),i(s)||(s=`${s}px`),0===l&&(l=1);const c=Object.assign({"--size":s,"--primary":e(a),"--secondary":e(t),"--speedMultiplier":l},o);return r.createElement("div",{className:"double-dotted-circle-loader",style:c})},exports.DualRingLoader=({loading:n=!0,primary:a="#B5B5B5",secondary:t="#ff3d00",size:s="48px",speedMultiplier:l=1,cssOverride:o={}})=>{if(!n)return null;""===s&&(s="48px"),i(s)||(s=`${s}px`),0===l&&(l=1);const c=Object.assign({"--size":s,"--primary":e(a),"--secondary":e(t),"--speedMultiplier":l},o);return r.createElement("div",{className:"dual-ring-loader",style:c})},exports.ElectronLoader=({loading:n=!0,primary:a="#B5B5B5",secondary:t="#ff3d00",size:s="48px",speedMultiplier:l=1,cssOverride:o={}})=>{if(!n)return null;""===s&&(s="48px"),i(s)||(s=`${s}px`),0===l&&(l=1);const c=Object.assign({"--size":s,"--primary":e(a),"--secondary":e(t),"--speedMultiplier":l},o);return r.createElement("div",{className:"electron-loader",style:c})},exports.MultiCircleLoader=({loading:n=!0,primary:a="#B5B5B5",secondary:t="#ff3d00",size:s="48px",speedMultiplier:l=1,cssOverride:o={}})=>{if(!n)return null;""===s&&(s="48px"),i(s)||(s=`${s}px`),l||(l=1);const c=Object.assign({"--size":s,"--primary":e(a),"--secondary":e(t),"--speedMultiplier":l},o);return r.createElement("div",{className:"multicircle-loader",style:c})},exports.RingLoader=({loading:n=!0,secondary:a="#ff3d00",size:t="48px",speedMultiplier:s=1,cssOverride:l={}})=>{if(!n)return null;""===t&&(t="48px"),i(t)||(t=`${t}px`),0===s&&(s=1);const o=Object.assign({"--size":t,"--secondary":e(a),"--speedMultiplier":s},l);return r.createElement("div",{className:"ring-loader",style:o})},exports.Skeleton=({loading:e=!0})=>e?r.createElement("div",null,"Loading...."):null,exports.TimerLoader=({loading:n=!0,primary:a="#B5B5B5",secondary:t="#ff3d00",size:s="48px",speedMultiplier:l=1,cssOverride:o={}})=>{if(!n)return null;""===s&&(s="48px"),i(s)||(s=`${s}px`),0===l&&(l=1);const c=Object.assign({"--size":s,"--primary":e(a),"--secondary":e(t),"--speedMultiplier":l},o);return r.createElement("div",{className:"timer-loader",style:c})};
 //# sourceMappingURL=index.js.map

dist/cjs/types/Simple-Loader/index.d.ts

@@ -1,1 +0,9 @@
-export { default as Loading } from "./Loading";
+export { default as CircleLoader } from "./CircleLoader";
+export { default as CircleInLoader } from "./CircleInLoader";
+export { default as ElectronLoader } from "./ElectronLoader";
+export { default as MultiCircleLoader } from "./MultiCircleLoader";
+export { default as DoubleDotCircleLoader } from "./DoubleDotCircleLoader";
+export { default as TimerLoader } from "./TimerLoader";
+export { default as RingLoader } from "./RingLoader";
+export { default as DualRingLoader } from "./DualRingLoader";
+export { default as CirclePulseLoader } from "./CirclePulseLoader";

dist/esm/index.js

@@ -1,2 +0,2 @@
-import l from"react";const n=({loading:n=!0})=>n?l.createElement("div",null,"Loading...."):null,e=({loading:n=!0})=>n?l.createElement("div",null,"Loading...."):null;export{n as Loading,e as Skeleton};
+import r from"react";function e(r){if(!r)return null;if(r.startsWith("#")){const e=function(r){const e=r.match(/[A-Fa-f0-9]{2}/g);if(e)return e.map((r=>parseInt(r,16)));return null}(4===r.length?r.slice(1).split("").map((r=>r+r)).join(""):r);if(e)return`rgba(${e.join(", ")}, 1)`;console.warn(`Invalid hex code format: ${r}`)}else if(r.startsWith("rgb")){const e=function(r){const e=r.indexOf("("),n=r.indexOf(")");if(-1!==e&&-1!==n){const i=r.slice(e+1,n).split(",").map((r=>parseFloat(r.trim())));if(i.length>=3&&i.length<=4){return{rgb:i.slice(0,3),opacity:i[3]||1}}}return null}(r);if(e)return`rgba(${e.rgb.join(", ")}, ${e.opacity})`;console.warn(`Invalid rgb format: ${r}`)}else console.warn(`Invalid color format: ${r}`);return r}function n(r){if(!r)return"";if(r.startsWith("rgb")||r.startsWith("rgba")){const e=r.match(/\d+/g);if(e&&3===e.length)return`${e.join(", ")}`;if(e&&4===e.length){const r=e.join(", "),n=r.lastIndexOf(",");return r.slice(0,n)}}r.startsWith("#")&&(r=r.slice(1));return`${parseInt(r.substring(0,2),16)}, ${parseInt(r.substring(2,4),16)}, ${parseInt(r.substring(4,6),16)}`}function i(r){const e=/[A-Za-z%]+$/;return e||console.warn(`${r} check the unit or add a unit `),e.test(r)}!function(r,e){void 0===e&&(e={});var n=e.insertAt;if(r&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===n&&i.firstChild?i.insertBefore(a,i.firstChild):i.appendChild(a),a.styleSheet?a.styleSheet.cssText=r:a.appendChild(document.createTextNode(r))}}(':root {\n  --base: #263238;\n  --primary: #b5b5b5;\n  --primary-rgb: 181, 181, 181;\n  --secondary: #ff3d00;\n  --size: 48px;\n  --speedMultiplier: 1;\n}\n.circle-loader {\n  width: var(--size);\n  height: var(--size);\n  border: calc(var(--size) - var(--size) * 0.9) solid var(--primary);\n  border-bottom-color: var(--secondary);\n  border-radius: 50%;\n  display: inline-block;\n  animation: rotation calc(1s / var(--speedMultiplier)) linear infinite;\n}\n\n.circle-in-loader {\n  width: var(--size);\n  height: var(--size);\n  border: calc(var(--size) - var(--size) * 0.9) solid var(--primary);\n  border-radius: 50%;\n  display: inline-block;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.circle-in-loader::before {\n  content: "";\n  width: calc(var(--size) - calc(var(--size) * 0.3));\n  height: calc(var(--size) - calc(var(--size) * 0.3));\n  border-radius: 50%;\n  border: calc(var(--size) - var(--size) * 0.9) solid transparent;\n  border-bottom-color: var(--secondary);\n  animation: rotation calc(1s / var(--speedMultiplier)) linear infinite;\n}\n\n.electron-loader {\n  width: var(--size);\n  height: var(--size);\n  border: calc(var(--size) - var(--size) * 0.9) solid var(--primary);\n  border-radius: 50%;\n  display: inline-block;\n  position: relative;\n  animation: rotation calc(1s / var(--speedMultiplier)) linear infinite;\n}\n.electron-loader::after {\n  content: "";\n  position: absolute;\n  left: 0;\n  top: 0;\n  background: var(--secondary);\n  width: calc(var(--size) / 3);\n  height: calc(var(--size) / 3);\n  transform: translate(-50%, 50%);\n  border-radius: 50%;\n}\n\n.multicircle-loader {\n  width: var(--size);\n  height: var(--size);\n  border-radius: 50%;\n  display: inline-block;\n  position: relative;\n  border: calc(var(--size) - var(--size) * 0.9) solid;\n  border-color: var(--primary) var(--primary) transparent transparent;\n  animation: rotation calc(1s / var(--speedMultiplier)) linear infinite;\n}\n.multicircle-loader::after,\n.multicircle-loader::before {\n  content: "";\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  margin: auto;\n  border: calc(var(--size) - var(--size) * 0.9) solid;\n  border-color: transparent transparent var(--secondary) var(--secondary);\n  width: calc(var(--size) - calc(var(--size) * 0.6));\n  height: calc(var(--size) - calc(var(--size) * 0.6));\n  border-radius: 50%;\n  animation: rotationBack calc(0.5s / var(--speedMultiplier)) linear infinite;\n  transform-origin: center center;\n}\n.multicircle-loader::before {\n  width: calc(var(--size) - calc(var(--size) * 0.3));\n  height: calc(var(--size) - calc(var(--size) * 0.3));\n  border-color: var(--primary) var(--primary) transparent transparent;\n  animation: rotation calc(1.5s / var(--speedMultiplier)) linear infinite;\n}\n\n.double-dotted-circle-loader {\n  width: var(--size);\n  height: var(--size);\n  border: calc(var(--size) * 1.07 - var(--size)) dotted var(--primary);\n  border-style: solid solid dotted dotted;\n  border-radius: 50%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  animation: rotation calc(2s / var(--speedMultiplier)) linear infinite;\n}\n.double-dotted-circle-loader::after {\n  content: "";\n  margin: auto;\n  border: calc(var(--size) * 1.07 - var(--size)) dotted var(--secondary);\n  border-style: solid solid dotted;\n  width: calc(var(--size) / 2);\n  height: calc(var(--size) / 2);\n  border-radius: 50%;\n  animation: rotationBack calc(1s / var(--speedMultiplier)) linear infinite;\n  transform-origin: center center;\n}\n\n.timer-loader {\n  width: var(--size);\n  height: var(--size);\n  border: calc(var(--size) * 1.07 - var(--size)) solid var(--primary);\n  border-radius: 50%;\n  display: inline-block;\n  position: relative;\n  z-index: -1;\n  animation: rotation calc(1s / var(--speedMultiplier)) linear infinite;\n}\n.timer-loader::after {\n  content: "";\n  z-index: 2;\n  position: absolute;\n  left: 50%;\n  top: 0;\n  background: var(--secondary);\n  width: calc(var(--size) * 1.07 - var(--size));\n  height: calc(var(--size) / 2);\n  transform: translateX(-50%);\n}\n\n.ring-loader {\n  width: var(--size);\n  height: var(--size);\n  border-radius: 50%;\n  display: inline-block;\n  border-top: calc(var(--size) * 1.08 - var(--size)) solid var(--secondary);\n  border-right: calc(var(--size) * 1.08 - var(--size)) solid transparent;\n  opacity: 0.8;\n  animation: rotation calc(1s / var(--speedMultiplier)) linear infinite;\n}\n\n.dual-ring-loader {\n  width: var(--size);\n  height: var(--size);\n  border-radius: 50%;\n  display: inline-block;\n  border-top: calc(var(--size) * 1.08 - var(--size)) solid var(--primary);\n  border-right: calc(var(--size) * 1.08 - var(--size)) solid transparent;\n  animation: rotation calc(1s / var(--speedMultiplier)) linear infinite;\n}\n.dual-ring-loader::after {\n  content: "";\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: var(--size);\n  height: var(--size);\n  border-radius: 50%;\n  border-bottom: calc(var(--size) * 1.08 - var(--size)) solid var(--secondary);\n  border-left: calc(var(--size) * 1.08 - var(--size)) solid transparent;\n}\n\n.circle-pulse-loader {\n  width: var(--size);\n  height: var(--size);\n  border-radius: 50%;\n  display: inline-block;\n  position: relative;\n  border: calc(var(--size) - var(--size) * 0.8) solid var(--secondary);\n  animation: circlePulse calc(1s / var(--speedMultiplier)) linear infinite\n    alternate;\n}\n\n@keyframes rotation {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n@keyframes rotationBack {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(-360deg);\n  }\n}\n\n@keyframes circlePulse {\n  0% {\n    border-color: rgba(var(--primary-rgb), 1) rgba(var(--primary-rgb), 0)\n      rgba(var(--primary-rgb), 0) rgba(var(--primary-rgb), 0);\n  }\n  33% {\n    border-color: rgba(var(--primary-rgb), 1) rgba(var(--primary-rgb), 1)\n      rgba(var(--primary-rgb), 0) rgba(var(--primary-rgb), 0);\n  }\n  66% {\n    border-color: rgba(var(--primary-rgb), 1) rgba(var(--primary-rgb), 1)\n      rgba(var(--primary-rgb), 1) rgba(var(--primary-rgb), 0);\n  }\n  100% {\n    border-color: rgba(var(--primary-rgb), 1) rgba(var(--primary-rgb), 1)\n      rgba(var(--primary-rgb), 1) rgba(var(--primary-rgb), 1);\n  }\n}\n');const a=({loading:n=!0,primary:a="#B5B5B5",secondary:t="#ff3d00",size:s="48px",speedMultiplier:l=1,cssOverride:o={}})=>{if(!n)return null;""===s&&(s="48px"),i(s)||(s=`${s}px`),0===l&&(l=1);const c=Object.assign({"--size":s,"--primary":e(a),"--secondary":e(t),"--speedMultiplier":l},o);return r.createElement("div",{className:"circle-loader",style:c})},t=({loading:n=!0,primary:a="#B5B5B5",secondary:t="#ff3d00",size:s="48px",speedMultiplier:l=1,cssOverride:o={}})=>{if(!n)return null;""===s&&(s="48px"),i(s)||(s=`${s}px`),0===l&&(l=1);const c=Object.assign({"--size":s,"--primary":e(a),"--secondary":e(t),"--speedMultiplier":l},o);return r.createElement("div",{className:"circle-in-loader",style:c})},s=({loading:n=!0,primary:a="#B5B5B5",secondary:t="#ff3d00",size:s="48px",speedMultiplier:l=1,cssOverride:o={}})=>{if(!n)return null;""===s&&(s="48px"),i(s)||(s=`${s}px`),0===l&&(l=1);const c=Object.assign({"--size":s,"--primary":e(a),"--secondary":e(t),"--speedMultiplier":l},o);return r.createElement("div",{className:"electron-loader",style:c})},l=({loading:n=!0,primary:a="#B5B5B5",secondary:t="#ff3d00",size:s="48px",speedMultiplier:l=1,cssOverride:o={}})=>{if(!n)return null;""===s&&(s="48px"),i(s)||(s=`${s}px`),l||(l=1);const c=Object.assign({"--size":s,"--primary":e(a),"--secondary":e(t),"--speedMultiplier":l},o);return r.createElement("div",{className:"multicircle-loader",style:c})},o=({loading:n=!0,primary:a="#B5B5B5",secondary:t="#ff3d00",size:s="48px",speedMultiplier:l=1,cssOverride:o={}})=>{if(!n)return null;""===s&&(s="48px"),i(s)||(s=`${s}px`),0===l&&(l=1);const c=Object.assign({"--size":s,"--primary":e(a),"--secondary":e(t),"--speedMultiplier":l},o);return r.createElement("div",{className:"double-dotted-circle-loader",style:c})},c=({loading:n=!0,primary:a="#B5B5B5",secondary:t="#ff3d00",size:s="48px",speedMultiplier:l=1,cssOverride:o={}})=>{if(!n)return null;""===s&&(s="48px"),i(s)||(s=`${s}px`),0===l&&(l=1);const c=Object.assign({"--size":s,"--primary":e(a),"--secondary":e(t),"--speedMultiplier":l},o);return r.createElement("div",{className:"timer-loader",style:c})},d=({loading:n=!0,secondary:a="#ff3d00",size:t="48px",speedMultiplier:s=1,cssOverride:l={}})=>{if(!n)return null;""===t&&(t="48px"),i(t)||(t=`${t}px`),0===s&&(s=1);const o=Object.assign({"--size":t,"--secondary":e(a),"--speedMultiplier":s},l);return r.createElement("div",{className:"ring-loader",style:o})},p=({loading:n=!0,primary:a="#B5B5B5",secondary:t="#ff3d00",size:s="48px",speedMultiplier:l=1,cssOverride:o={}})=>{if(!n)return null;""===s&&(s="48px"),i(s)||(s=`${s}px`),0===l&&(l=1);const c=Object.assign({"--size":s,"--primary":e(a),"--secondary":e(t),"--speedMultiplier":l},o);return r.createElement("div",{className:"dual-ring-loader",style:c})},v=({loading:a=!0,primary:t="#B5B5B5",size:s="48px",speedMultiplier:l=1,cssOverride:o={}})=>{if(!a)return null;""===s&&(s="48px"),i(s)||(s=`${s}px`),0===l&&(l=1);const c=Object.assign({"--size":s,"--primary-rgb":n(e(t)),"--speedMultiplier":l},o);return r.createElement("div",{className:"circle-pulse-loader",style:c})},u=({loading:e=!0})=>e?r.createElement("div",null,"Loading...."):null;export{t as CircleInLoader,a as CircleLoader,v as CirclePulseLoader,o as DoubleDotCircleLoader,p as DualRingLoader,s as ElectronLoader,l as MultiCircleLoader,d as RingLoader,u as Skeleton,c as TimerLoader};
 //# sourceMappingURL=index.js.map

dist/esm/types/Simple-Loader/index.d.ts

@@ -1,1 +0,9 @@
-export { default as Loading } from "./Loading";
+export { default as CircleLoader } from "./CircleLoader";
+export { default as CircleInLoader } from "./CircleInLoader";
+export { default as ElectronLoader } from "./ElectronLoader";
+export { default as MultiCircleLoader } from "./MultiCircleLoader";
+export { default as DoubleDotCircleLoader } from "./DoubleDotCircleLoader";
+export { default as TimerLoader } from "./TimerLoader";
+export { default as RingLoader } from "./RingLoader";
+export { default as DualRingLoader } from "./DualRingLoader";
+export { default as CirclePulseLoader } from "./CirclePulseLoader";

dist/index.d.ts

 /// <reference types="react" />
-interface LoadingProps {
+import React, { CSSProperties } from 'react';
+
+interface DefaultProps {
     loading?: boolean;
+    size?: string;
+    primary?: string;
+    secondary?: string;
+    speedMultiplier?: number;
+    cssOverride?: CSSProperties;
 }
-declare const Loading: ({ loading }: LoadingProps) => JSX.Element | null;
+type DefaultWithoutPrimary = Omit<DefaultProps, "primary">;
+type DefaultWithoutSecondary = Omit<DefaultProps, "secondary">;
 
+declare const CircleLoader: ({ loading, primary, secondary, size, speedMultiplier, cssOverride, }: DefaultProps) => React.JSX.Element | null;
+
+declare const CircleInLoader: ({ loading, primary, secondary, size, speedMultiplier, cssOverride, }: DefaultProps) => React.JSX.Element | null;
+
+declare const ElectronLoader: ({ loading, primary, secondary, size, speedMultiplier, cssOverride, }: DefaultProps) => React.JSX.Element | null;
+
+declare const MultiCircleLoader: ({ loading, primary, secondary, size, speedMultiplier, cssOverride, }: DefaultProps) => React.JSX.Element | null;
+
+declare const DoubleDotCircleLoader: ({ loading, primary, secondary, size, speedMultiplier, cssOverride, }: DefaultProps) => React.JSX.Element | null;
+
+declare const TimerLoader: ({ loading, primary, secondary, size, speedMultiplier, cssOverride, }: DefaultProps) => React.JSX.Element | null;
+
+declare const RingLoader: ({ loading, secondary, size, speedMultiplier, cssOverride, }: DefaultWithoutPrimary) => React.JSX.Element | null;
+
+declare const DualRingLoader: ({ loading, primary, secondary, size, speedMultiplier, cssOverride, }: DefaultProps) => React.JSX.Element | null;
+
+declare const CirclePulseLoader: ({ loading, primary, size, speedMultiplier, cssOverride, }: DefaultWithoutSecondary) => React.JSX.Element | null;
+
 interface SkeletonProps {
@@ -12,2 +38,2 @@ loading?: boolean;
 
-export { Loading, Skeleton };
+export { CircleInLoader, CircleLoader, CirclePulseLoader, DoubleDotCircleLoader, DualRingLoader, ElectronLoader, MultiCircleLoader, RingLoader, Skeleton, TimerLoader };

package.json

 {
   "name": "@ayush-2002/load-it",
-  "version": "0.0.2",
+  "version": "1.0.0",
   "description": "A lightweight React library that provides simple loader, skeleton loader, and toast notification components to enhance user experience.",
@@ -43,2 +43,3 @@ "scripts": {
     "@storybook/testing-library": "^0.0.14-next.2",
+    "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
@@ -55,2 +56,3 @@ "@types/jest": "^29.5.3",
     "rollup": "^3.26.2",
+    "rollup-plugin-copy": "^3.4.0",
     "rollup-plugin-dts": "^5.3.0",
@@ -57,0 +59,0 @@ "rollup-plugin-peer-deps-external": "^2.2.4",

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

62109

increased by1002%

Number of package files

42

increased by133.33%

Lines of code

676

increased by1369.57%

Worsened metrics

Dev dependency count

35

increased by6.06%

Number of low supply chain risk alerts

2

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes