New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

basic-loading

Package Overview
Dependencies
Maintainers
1
Versions
40
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

basic-loading - npm Package Compare versions

Comparing version 0.0.19 to 0.0.20

dist/cjs/component/Spinner.d.ts
dist/cjs/component/Spinner.js
dist/esm/component/Spinner.d.ts
dist/esm/component/Spinner.js

11

dist/cjs/component/Pulse.d.ts

@@ -1,1 +0,10 @@

export default function Pulse(): import("react/jsx-runtime").JSX.Element;
/// <reference types="react" />
interface Datatype {
option: {
size: number;
color: string;
};
children?: React.ReactNode;
}
export default function Pulse({ option, children }: Datatype): import("react/jsx-runtime").JSX.Element;
export {};

41

dist/cjs/component/Pulse.js

@@ -15,14 +15,33 @@ "use strict";

var jsx_runtime_1 = require("react/jsx-runtime");
function Pulse() {
return ((0, jsx_runtime_1.jsx)("div", __assign({ className: "relative", style: {
width: "150px",
height: "150px",
} }, { children: (0, jsx_runtime_1.jsx)("div", { style: {
width: "150px",
height: "150px",
border: "solid",
borderWidth: "2px",
borderRadius: "50%",
}, className: "pulse" }) })));
function Pulse(_a) {
var option = _a.option, children = _a.children;
var size = option.size, color = option.color;
var animation = "\n @keyframes pulse {\n 0% {\n scale: 1;\n opacity: 0.5;\n }\n 100% {\n scale: 1.8;\n opacity: 0;\n }\n }\n";
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("style", { children: animation }), (0, jsx_runtime_1.jsxs)("div", __assign({ style: {
position: "relative",
display: "flex",
justifyContent: "center",
alignItems: "center",
width: size,
height: size,
} }, { children: [(0, jsx_runtime_1.jsx)("div", { style: {
position: "absolute",
width: size,
height: size,
borderRadius: "50%",
animation: "pulse 1.5s ease-in-out infinite",
backgroundColor: color,
} }), (0, jsx_runtime_1.jsx)("div", __assign({ style: {
zIndex: 10,
display: "flex",
justifyContent: "center",
alignItems: "center",
width: size,
height: size,
top: "50%",
left: "50%",
borderRadius: "50%",
backgroundColor: color,
} }, { children: children }))] }))] }));
}
exports.default = Pulse;

18

dist/cjs/component/Skeleton.d.ts

@@ -1,2 +0,16 @@

export declare function SkeletonExample(): import("react/jsx-runtime").JSX.Element;
export declare function SkeletonSample(): import("react/jsx-runtime").JSX.Element;
type StringObject = {
[key: string]: string;
};
interface Datatype {
option: {
width: string;
height: string;
speed: number;
color: [string, string];
borderRadius?: string;
};
className?: string;
style?: StringObject;
}
export default function Skeleton({ option, className, style }: Datatype): import("react/jsx-runtime").JSX.Element;
export {};

42

dist/cjs/component/Skeleton.js

@@ -14,3 +14,2 @@ "use strict";

Object.defineProperty(exports, "__esModule", { value: true });
exports.SkeletonSample = exports.SkeletonExample = void 0;
var jsx_runtime_1 = require("react/jsx-runtime");

@@ -20,43 +19,6 @@ function Skeleton(_a) {

var width = option.width, height = option.height, speed = option.speed, borderRadius = option.borderRadius, color = option.color;
var skeletonKeyframes = "\n @keyframes skeletonAnimation {\n 0%, 100% {\n background-color: ".concat(color !== null && color !== void 0 ? color : "#000000", "10;\n }\n \n 50% {\n background-color: ").concat(color !== null && color !== void 0 ? color : "#000000", "18;\n }\n }\n ");
var skeletonKeyframes = "\n @keyframes skeletonAnimation {\n 0%, 100% {\n background-color: ".concat(color[0], ";\n }\n \n 50% {\n background-color: ").concat(color[1], ";\n }\n }\n ");
var skeleton = __assign(__assign({}, style), { width: width, height: height, borderRadius: borderRadius, animation: "skeletonAnimation ".concat(speed, "s ease-in-out infinite") });
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("style", { children: skeletonKeyframes }), (0, jsx_runtime_1.jsx)("div", { style: skeleton, className: className })] }));
}
function SkeletonExample() {
var option1 = {
width: "70px",
height: "70px",
speed: 1,
borderRadius: "50%",
};
var option2 = {
width: "150px",
height: "20px",
speed: 1,
borderRadius: "7px",
};
var option3 = {
width: "90px",
height: "20px",
speed: 1,
borderRadius: "7px",
};
var option4 = {
width: "300px",
height: "100px",
speed: 1,
borderRadius: "10px",
};
return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ style: { display: "flex", alignItems: "center" } }, { children: [(0, jsx_runtime_1.jsx)(Skeleton, { option: option1, style: { marginRight: "10px" } }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(Skeleton, { option: option2, style: { marginBottom: "6px" } }), (0, jsx_runtime_1.jsx)(Skeleton, { option: option3 })] })] })), (0, jsx_runtime_1.jsx)(Skeleton, { option: option4, style: { marginTop: "15px" } })] }));
}
exports.SkeletonExample = SkeletonExample;
function SkeletonSample() {
var skeletonOption1 = {
width: "100px",
height: "100px",
speed: 1,
borderRadius: "20px",
};
return (0, jsx_runtime_1.jsx)(Skeleton, { option: skeletonOption1, className: "mx-2" });
}
exports.SkeletonSample = SkeletonSample;
exports.default = Skeleton;

9

dist/cjs/component/Wave.d.ts

@@ -1,1 +0,8 @@

export default function Wave(): import("react/jsx-runtime").JSX.Element;
interface Datatype {
option: {
height: number;
color: string;
};
}
export default function Wave({ option }: Datatype): import("react/jsx-runtime").JSX.Element;
export {};

75

dist/cjs/component/Wave.js

@@ -15,41 +15,40 @@ "use strict";

var jsx_runtime_1 = require("react/jsx-runtime");
function Wave() {
return ((0, jsx_runtime_1.jsxs)("div", __assign({ style: { display: "flex" } }, { children: [(0, jsx_runtime_1.jsx)("div", { style: {
width: "5px",
height: "30px",
backgroundColor: "black",
margin: "3px",
animation: "wave 1.5s linear infinite",
} }), (0, jsx_runtime_1.jsx)("div", { style: {
width: "5px",
height: "30px",
backgroundColor: "black",
margin: "3px",
animation: "wave 1.5s 0.3s linear infinite",
} }), (0, jsx_runtime_1.jsx)("div", { style: {
width: "5px",
height: "30px",
backgroundColor: "black",
margin: "3px",
animation: "wave 1.5s 0.6s linear infinite",
} }), (0, jsx_runtime_1.jsx)("div", { style: {
width: "5px",
height: "30px",
backgroundColor: "black",
margin: "3px",
animation: "wave 1.5s 0.9s linear infinite",
} }), (0, jsx_runtime_1.jsx)("div", { style: {
width: "5px",
height: "30px",
backgroundColor: "black",
margin: "3px",
animation: "wave 1.5s 1.2s linear infinite",
} }), (0, jsx_runtime_1.jsx)("div", { style: {
width: "5px",
height: "30px",
backgroundColor: "black",
margin: "3px",
animation: "wave 1.5s 1.5s linear infinite",
} })] })));
function Wave(_a) {
var option = _a.option;
var height = option.height, color = option.color;
var width = height * 0.15;
var margin = height * 0.1;
var animation = "\n @keyframes wave {\n 0%, 100%{\n transform: scaleY(1);\n }\n 50% {\n transform: scaleY(0.5);\n }\n }\n";
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("style", { children: animation }), (0, jsx_runtime_1.jsxs)("div", __assign({ style: { display: "flex", alignItems: "center" } }, { children: [(0, jsx_runtime_1.jsx)("div", { style: {
width: width,
height: height,
backgroundColor: color,
margin: margin,
animation: "wave 1.2s linear infinite",
} }), (0, jsx_runtime_1.jsx)("div", { style: {
width: width,
height: height,
backgroundColor: color,
margin: margin,
animation: "wave 1.2s 0.3s linear infinite",
} }), (0, jsx_runtime_1.jsx)("div", { style: {
width: width,
height: height,
backgroundColor: color,
margin: margin,
animation: "wave 1.2s 0.6s linear infinite",
} }), (0, jsx_runtime_1.jsx)("div", { style: {
width: width,
height: height,
backgroundColor: color,
margin: margin,
animation: "wave 1.2s 0.9s linear infinite",
} }), (0, jsx_runtime_1.jsx)("div", { style: {
width: width,
height: height,
backgroundColor: color,
margin: margin,
animation: "wave 1.2s 1.2s linear infinite",
} })] }))] }));
}
exports.default = Wave;

11

dist/esm/component/Pulse.d.ts

@@ -1,1 +0,10 @@

export default function Pulse(): import("react/jsx-runtime").JSX.Element;
/// <reference types="react" />
interface Datatype {
option: {
size: number;
color: string;
};
children?: React.ReactNode;
}
export default function Pulse({ option, children }: Datatype): import("react/jsx-runtime").JSX.Element;
export {};

43

dist/esm/component/Pulse.js

@@ -12,14 +12,33 @@ var __assign = (this && this.__assign) || function () {

};
import { jsx as _jsx } from "react/jsx-runtime";
export default function Pulse() {
return (_jsx("div", __assign({ className: "relative", style: {
width: "150px",
height: "150px",
} }, { children: _jsx("div", { style: {
width: "150px",
height: "150px",
border: "solid",
borderWidth: "2px",
borderRadius: "50%",
}, className: "pulse" }) })));
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
export default function Pulse(_a) {
var option = _a.option, children = _a.children;
var size = option.size, color = option.color;
var animation = "\n @keyframes pulse {\n 0% {\n scale: 1;\n opacity: 0.5;\n }\n 100% {\n scale: 1.8;\n opacity: 0;\n }\n }\n";
return (_jsxs(_Fragment, { children: [_jsx("style", { children: animation }), _jsxs("div", __assign({ style: {
position: "relative",
display: "flex",
justifyContent: "center",
alignItems: "center",
width: size,
height: size,
} }, { children: [_jsx("div", { style: {
position: "absolute",
width: size,
height: size,
borderRadius: "50%",
animation: "pulse 1.5s ease-in-out infinite",
backgroundColor: color,
} }), _jsx("div", __assign({ style: {
zIndex: 10,
display: "flex",
justifyContent: "center",
alignItems: "center",
width: size,
height: size,
top: "50%",
left: "50%",
borderRadius: "50%",
backgroundColor: color,
} }, { children: children }))] }))] }));
}

18

dist/esm/component/Skeleton.d.ts

@@ -1,2 +0,16 @@

export declare function SkeletonExample(): import("react/jsx-runtime").JSX.Element;
export declare function SkeletonSample(): import("react/jsx-runtime").JSX.Element;
type StringObject = {
[key: string]: string;
};
interface Datatype {
option: {
width: string;
height: string;
speed: number;
color: [string, string];
borderRadius?: string;
};
className?: string;
style?: StringObject;
}
export default function Skeleton({ option, className, style }: Datatype): import("react/jsx-runtime").JSX.Element;
export {};

40

dist/esm/component/Skeleton.js

@@ -13,44 +13,8 @@ var __assign = (this && this.__assign) || function () {

import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
function Skeleton(_a) {
export default function Skeleton(_a) {
var option = _a.option, className = _a.className, style = _a.style;
var width = option.width, height = option.height, speed = option.speed, borderRadius = option.borderRadius, color = option.color;
var skeletonKeyframes = "\n @keyframes skeletonAnimation {\n 0%, 100% {\n background-color: ".concat(color !== null && color !== void 0 ? color : "#000000", "10;\n }\n \n 50% {\n background-color: ").concat(color !== null && color !== void 0 ? color : "#000000", "18;\n }\n }\n ");
var skeletonKeyframes = "\n @keyframes skeletonAnimation {\n 0%, 100% {\n background-color: ".concat(color[0], ";\n }\n \n 50% {\n background-color: ").concat(color[1], ";\n }\n }\n ");
var skeleton = __assign(__assign({}, style), { width: width, height: height, borderRadius: borderRadius, animation: "skeletonAnimation ".concat(speed, "s ease-in-out infinite") });
return (_jsxs(_Fragment, { children: [_jsx("style", { children: skeletonKeyframes }), _jsx("div", { style: skeleton, className: className })] }));
}
export function SkeletonExample() {
var option1 = {
width: "70px",
height: "70px",
speed: 1,
borderRadius: "50%",
};
var option2 = {
width: "150px",
height: "20px",
speed: 1,
borderRadius: "7px",
};
var option3 = {
width: "90px",
height: "20px",
speed: 1,
borderRadius: "7px",
};
var option4 = {
width: "300px",
height: "100px",
speed: 1,
borderRadius: "10px",
};
return (_jsxs("div", { children: [_jsxs("div", __assign({ style: { display: "flex", alignItems: "center" } }, { children: [_jsx(Skeleton, { option: option1, style: { marginRight: "10px" } }), _jsxs("div", { children: [_jsx(Skeleton, { option: option2, style: { marginBottom: "6px" } }), _jsx(Skeleton, { option: option3 })] })] })), _jsx(Skeleton, { option: option4, style: { marginTop: "15px" } })] }));
}
export function SkeletonSample() {
var skeletonOption1 = {
width: "100px",
height: "100px",
speed: 1,
borderRadius: "20px",
};
return _jsx(Skeleton, { option: skeletonOption1, className: "mx-2" });
}

9

dist/esm/component/Wave.d.ts

@@ -1,1 +0,8 @@

export default function Wave(): import("react/jsx-runtime").JSX.Element;
interface Datatype {
option: {
height: number;
color: string;
};
}
export default function Wave({ option }: Datatype): import("react/jsx-runtime").JSX.Element;
export {};

77

dist/esm/component/Wave.js

@@ -12,41 +12,40 @@ var __assign = (this && this.__assign) || function () {

};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export default function Wave() {
return (_jsxs("div", __assign({ style: { display: "flex" } }, { children: [_jsx("div", { style: {
width: "5px",
height: "30px",
backgroundColor: "black",
margin: "3px",
animation: "wave 1.5s linear infinite",
} }), _jsx("div", { style: {
width: "5px",
height: "30px",
backgroundColor: "black",
margin: "3px",
animation: "wave 1.5s 0.3s linear infinite",
} }), _jsx("div", { style: {
width: "5px",
height: "30px",
backgroundColor: "black",
margin: "3px",
animation: "wave 1.5s 0.6s linear infinite",
} }), _jsx("div", { style: {
width: "5px",
height: "30px",
backgroundColor: "black",
margin: "3px",
animation: "wave 1.5s 0.9s linear infinite",
} }), _jsx("div", { style: {
width: "5px",
height: "30px",
backgroundColor: "black",
margin: "3px",
animation: "wave 1.5s 1.2s linear infinite",
} }), _jsx("div", { style: {
width: "5px",
height: "30px",
backgroundColor: "black",
margin: "3px",
animation: "wave 1.5s 1.5s linear infinite",
} })] })));
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
export default function Wave(_a) {
var option = _a.option;
var height = option.height, color = option.color;
var width = height * 0.15;
var margin = height * 0.1;
var animation = "\n @keyframes wave {\n 0%, 100%{\n transform: scaleY(1);\n }\n 50% {\n transform: scaleY(0.5);\n }\n }\n";
return (_jsxs(_Fragment, { children: [_jsx("style", { children: animation }), _jsxs("div", __assign({ style: { display: "flex", alignItems: "center" } }, { children: [_jsx("div", { style: {
width: width,
height: height,
backgroundColor: color,
margin: margin,
animation: "wave 1.2s linear infinite",
} }), _jsx("div", { style: {
width: width,
height: height,
backgroundColor: color,
margin: margin,
animation: "wave 1.2s 0.3s linear infinite",
} }), _jsx("div", { style: {
width: width,
height: height,
backgroundColor: color,
margin: margin,
animation: "wave 1.2s 0.6s linear infinite",
} }), _jsx("div", { style: {
width: width,
height: height,
backgroundColor: color,
margin: margin,
animation: "wave 1.2s 0.9s linear infinite",
} }), _jsx("div", { style: {
width: width,
height: height,
backgroundColor: color,
margin: margin,
animation: "wave 1.2s 1.2s linear infinite",
} })] }))] }));
}

2

package.json
{
"name": "basic-loading",
"version": "0.0.19",
"version": "0.0.20",
"private": false,

@@ -5,0 +5,0 @@ "main": "dist/cjs/index.js",

dist/cjs/component/SpinnerBasic.d.ts
dist/cjs/component/SpinnerBasic.js
dist/cjs/component/SpinnerDot.d.ts
dist/cjs/component/SpinnerDot.js
dist/esm/component/SpinnerBasic.d.ts
dist/esm/component/SpinnerBasic.js
dist/esm/component/SpinnerDot.d.ts
dist/esm/component/SpinnerDot.js
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc