react-content-shimmer
Version:
Content Shimmer to easily create placeholder loading, image loading, card loading, etc .., free to change the colors, speed, sizes, radius and shadow also have few deafult Loding Componets to use. (CardShimmer,ProfileShimmer,SocialShimmer,BulletListShimme
594 lines (572 loc) • 16.2 kB
JavaScript
import React from 'react';
var ContentShimmer = function ContentShimmer(_ref) {
var rows = _ref.rows,
background = _ref.background,
elevation = _ref.elevation,
speed = _ref.speed,
size = _ref.size,
foreground = _ref.foreground,
rounded = _ref.rounded,
style = _ref.style,
animation = _ref.animation;
var counter = [],
i = 0,
len = rows ? rows : 1;
while (++i <= len) {
counter.push(i);
}
var cardLoader = {
boxShadow: elevation ? "0 1px 2px 1px rgba(0, 0, 0, " + elevation + ")" : "0 1px 2px 1px rgba(0, 0, 0, 0.08), 0 -1px 3px 0 rgba(0, 0, 0, 0.06);",
animationDuration: typeof speed === "undefined" ? "1s" : speed + "s",
borderRadius: rounded ? "" + rounded : "0px",
background: "linear-gradient(to right, " + (background ? background : "#eeeeee") + " 8%, " + (foreground ? foreground : "#dddddd") + " 18%, " + (background ? background : "#eeeeee") + " 33%)",
height: size !== null && size !== void 0 && size.height ? size.height + "px" : "50px",
width: size !== null && size !== void 0 && size.width ? size.width + "px" : "150px"
};
var finalCardLoader = Object.assign(cardLoader, style);
return React.createElement("div", null, React.createElement("style", null, "@keyframes wave {\n 0% {\n background-position: -468px 0\n }\n 100% {\n background-position: 468px 0\n }\n }\n @keyframes pulse {\n 0% {\n opacity: 0.8;\n }\n 50% {\n opacity: 0.4;\n }\n 100% {\n opacity: 1;\n }\n }\n .defaultProp {\n background-size: 1500px 1000px !important;\n animation-fill-mode: forwards !important;\n animation-iteration-count: infinite !important;\n }\n \n .ShimmerRight {\n animation-name: " + (typeof animation === "undefined" ? "wave" : animation) + ";\n }\n "), counter.map(function (_, k) {
return React.createElement("div", {
key: k,
className: "ShimmerRight defaultProp",
style: finalCardLoader
});
}));
};
var ProfileShimmer = function ProfileShimmer(_ref2) {
var rows = _ref2.rows,
background = _ref2.background,
elevation = _ref2.elevation,
speed = _ref2.speed,
foreground = _ref2.foreground,
rounded = _ref2.rounded,
radius = _ref2.radius,
style = _ref2.style,
animation = _ref2.animation;
var counter = [],
i = 0,
len = rows ? rows : 1;
while (++i <= len) {
counter.push(i);
}
var height = 50;
var width = 50;
var _rounded = rounded ? rounded : "50%";
var profileLoader = {
padding: radius === "sm" ? "0rem" : radius === "md" ? "1rem" : radius === "lg" ? "2rem" : radius === "xl" ? "4rem" : radius === "xs" ? "0.5rem" : '0rem'
};
return React.createElement("div", null, counter.map(function (_, k) {
return React.createElement("div", {
style: style,
key: k
}, React.createElement(ContentShimmer, {
background: background,
elevation: elevation,
speed: speed,
foreground: foreground,
size: {
height: height,
width: width
},
animation: animation,
rounded: _rounded,
style: profileLoader
}));
}));
};
var SocialShimmer = function SocialShimmer(_ref3) {
var rows = _ref3.rows,
elevation = _ref3.elevation,
speed = _ref3.speed,
background = _ref3.background,
foreground = _ref3.foreground,
variant = _ref3.variant,
style = _ref3.style,
animation = _ref3.animation;
var counter = [],
i = 0,
len = rows ? rows : 1;
while (++i <= len) {
counter.push(i);
}
return React.createElement("div", null, counter.map(function (_, k) {
return React.createElement("div", {
style: style,
key: k
}, React.createElement("div", {
style: {
display: "flex",
alignItems: "center"
}
}, React.createElement(ProfileShimmer, {
animation: animation,
elevation: elevation,
speed: speed,
foreground: foreground,
background: background
}), React.createElement("div", {
style: {
paddingLeft: "2rem"
}
}, React.createElement(ContentShimmer, {
animation: animation,
style: {
marginBottom: "1rem"
},
size: {
height: 7,
width: 200
},
elevation: elevation,
speed: speed,
foreground: foreground,
background: background,
rounded: variant == "default" ? "0px" : "50px"
}), React.createElement(ContentShimmer, {
animation: animation,
size: {
height: 7,
width: 100
},
elevation: elevation,
speed: speed,
foreground: foreground,
background: background,
rounded: variant == "default" ? "0px" : "50px"
}))), React.createElement(ContentShimmer, {
animation: animation,
style: {
marginTop: "1rem"
},
size: {
height: 500,
width: 500
},
elevation: elevation,
speed: speed,
foreground: foreground,
background: background,
rounded: variant == "default" ? "0px" : "20px"
}));
}));
};
var BulletListShimmer = function BulletListShimmer(_ref4) {
var rows = _ref4.rows,
elevation = _ref4.elevation,
speed = _ref4.speed,
background = _ref4.background,
foreground = _ref4.foreground,
variant = _ref4.variant,
style = _ref4.style,
animation = _ref4.animation;
var counter = [],
i = 0,
len = rows ? rows : 1;
while (++i <= len) {
counter.push(i);
}
var height = 50;
var width = 50;
return React.createElement("div", null, counter.map(function (_, k) {
return React.createElement("div", {
style: style,
key: k
}, React.createElement("div", {
style: {
display: "flex",
alignItems: "center",
marginBottom: "1rem"
}
}, React.createElement(ContentShimmer, {
animation: animation,
background: background,
elevation: elevation,
speed: speed,
foreground: foreground,
rounded: variant == "default" ? "0px" : "50%",
size: {
height: height,
width: width
}
}), React.createElement("div", null, React.createElement(ContentShimmer, {
animation: animation,
style: {
marginLeft: "1rem",
marginBottom: "0.5rem"
},
size: {
height: 16,
width: 250
},
elevation: elevation,
speed: speed,
foreground: foreground,
background: background,
rounded: variant == "default" ? "0px" : "50px"
}), React.createElement(ContentShimmer, {
animation: animation,
style: {
marginLeft: "1rem"
},
size: {
height: 9,
width: 150
},
elevation: elevation,
speed: speed,
foreground: foreground,
background: background,
rounded: variant == "default" ? "0px" : "50px"
}))), React.createElement("div", {
style: {
display: "flex",
alignItems: "center",
marginBottom: "1rem"
}
}, React.createElement(ContentShimmer, {
animation: animation,
background: background,
elevation: elevation,
speed: speed,
foreground: foreground,
rounded: variant == "default" ? "0px" : "50%",
size: {
height: height,
width: width
}
}), React.createElement("div", null, React.createElement(ContentShimmer, {
animation: animation,
style: {
marginLeft: "1rem",
marginBottom: "0.5rem"
},
size: {
height: 16,
width: 250
},
elevation: elevation,
speed: speed,
foreground: foreground,
background: background,
rounded: variant == "default" ? "0px" : "50px"
}), React.createElement(ContentShimmer, {
animation: animation,
style: {
marginLeft: "1rem"
},
size: {
height: 9,
width: 150
},
elevation: elevation,
speed: speed,
foreground: foreground,
background: background,
rounded: variant == "default" ? "0px" : "50px"
}))));
}));
};
var CodeShimmer = function CodeShimmer(_ref5) {
var rows = _ref5.rows,
elevation = _ref5.elevation,
speed = _ref5.speed,
background = _ref5.background,
foreground = _ref5.foreground,
variant = _ref5.variant,
style = _ref5.style,
animation = _ref5.animation;
var counter = [],
i = 0,
len = rows ? rows : 1;
while (++i <= len) {
counter.push(i);
}
return React.createElement("div", null, counter.map(function (_, k) {
return React.createElement("div", {
style: style,
key: k
}, React.createElement("div", {
style: {
marginBottom: "1rem"
}
}, React.createElement(ContentShimmer, {
animation: animation,
style: {
padding: "0.5rem"
},
size: {
height: 10,
width: 70
},
elevation: elevation,
speed: speed,
foreground: foreground,
background: background,
rounded: variant == "default" ? "0px" : "50px"
})), React.createElement("div", {
style: {
display: "flex",
alignItems: "center",
marginBottom: "1rem"
}
}, React.createElement(ContentShimmer, {
animation: animation,
style: {
marginLeft: "1rem",
padding: "0.3rem"
},
size: {
height: 12,
width: 130
},
elevation: elevation,
speed: speed,
foreground: foreground,
background: background,
rounded: variant == "default" ? "0px" : "50px"
}), React.createElement(ContentShimmer, {
animation: animation,
style: {
marginLeft: "1rem",
padding: "0.3rem"
},
size: {
height: 12,
width: 80
},
elevation: elevation,
speed: speed,
foreground: foreground,
background: background,
rounded: variant == "default" ? "0px" : "50px"
}), React.createElement(ContentShimmer, {
animation: animation,
style: {
marginLeft: "1rem",
padding: "0.3rem"
},
size: {
height: 12,
width: 200
},
elevation: elevation,
speed: speed,
foreground: foreground,
background: background,
rounded: variant == "default" ? "0px" : "50px"
})), React.createElement("div", {
style: {
display: "flex",
alignItems: "center",
marginBottom: "1rem"
}
}, React.createElement(ContentShimmer, {
animation: animation,
style: {
marginLeft: "1rem",
padding: "0.3rem"
},
size: {
height: 12,
width: 130
},
elevation: elevation,
speed: speed,
foreground: foreground,
background: background,
rounded: variant == "default" ? "0px" : "50px"
}), React.createElement(ContentShimmer, {
animation: animation,
style: {
marginLeft: "1rem",
padding: "0.3rem"
},
size: {
height: 12,
width: 200
},
elevation: elevation,
speed: speed,
foreground: foreground,
background: background,
rounded: variant == "default" ? "0px" : "50px"
}), React.createElement(ContentShimmer, {
animation: animation,
style: {
marginLeft: "1rem",
padding: "0.3rem"
},
size: {
height: 12,
width: 80
},
elevation: elevation,
speed: speed,
foreground: foreground,
background: background,
rounded: variant == "default" ? "0px" : "50px"
})), React.createElement("div", {
style: {
display: "flex",
alignItems: "center",
marginBottom: "1rem"
}
}, React.createElement(ContentShimmer, {
animation: animation,
style: {
marginLeft: "1rem",
padding: "0.3rem"
},
size: {
height: 12,
width: 80
},
elevation: elevation,
speed: speed,
foreground: foreground,
background: background,
rounded: variant == "default" ? "0px" : "50px"
}), React.createElement(ContentShimmer, {
animation: animation,
style: {
marginLeft: "1rem",
padding: "0.3rem"
},
size: {
height: 12,
width: 130
},
elevation: elevation,
speed: speed,
foreground: foreground,
background: background,
rounded: variant == "default" ? "0px" : "50px"
}), React.createElement(ContentShimmer, {
animation: animation,
style: {
marginLeft: "1rem",
padding: "0.3rem"
},
size: {
height: 12,
width: 200
},
elevation: elevation,
speed: speed,
foreground: foreground,
background: background,
rounded: variant == "default" ? "0px" : "50px"
})), React.createElement("div", null, React.createElement(ContentShimmer, {
animation: animation,
style: {
padding: "0.5rem"
},
size: {
height: 10,
width: 70
},
elevation: elevation,
speed: speed,
foreground: foreground,
background: background,
rounded: variant == "default" ? "0px" : "50px"
})));
}));
};
var CardShimmer = function CardShimmer(_ref6) {
var rows = _ref6.rows,
elevation = _ref6.elevation,
speed = _ref6.speed,
background = _ref6.background,
foreground = _ref6.foreground,
variant = _ref6.variant,
style = _ref6.style,
animation = _ref6.animation;
var counter = [],
i = 0,
len = rows ? rows : 1;
while (++i <= len) {
counter.push(i);
}
return React.createElement("div", null, counter.map(function (_, k) {
return React.createElement("div", {
style: style,
key: k
}, React.createElement("div", null, React.createElement("div", {
style: {
display: "flex",
alignItems: "center"
}
}, React.createElement(ContentShimmer, {
animation: animation,
size: {
height: 80,
width: 80
},
elevation: elevation,
speed: speed,
foreground: foreground,
background: background,
rounded: variant == "default" ? "0px" : "50px"
}), React.createElement("div", {
style: {
paddingLeft: "2rem"
}
}, React.createElement(ContentShimmer, {
animation: animation,
style: {
marginBottom: "0.5rem"
},
size: {
height: 15,
width: 150
},
elevation: elevation,
speed: speed,
foreground: foreground,
background: background,
rounded: variant == "default" ? "0px" : "50px"
}), React.createElement(ContentShimmer, {
animation: animation,
size: {
height: 15,
width: 100
},
elevation: elevation,
speed: speed,
foreground: foreground,
background: background,
rounded: variant == "default" ? "0px" : "50px"
}))), React.createElement(ContentShimmer, {
animation: animation,
style: {
marginTop: "1rem"
},
size: {
height: 20,
width: 300
},
elevation: elevation,
speed: speed,
foreground: foreground,
background: background,
rounded: variant == "default" ? "0px" : "50px"
}), React.createElement(ContentShimmer, {
animation: animation,
style: {
marginTop: "0.5rem"
},
size: {
height: 20,
width: 300
},
elevation: elevation,
speed: speed,
foreground: foreground,
background: background,
rounded: variant == "default" ? "0px" : "50px"
})));
}));
};
export default ContentShimmer;
export { BulletListShimmer, CardShimmer, CodeShimmer, ProfileShimmer, SocialShimmer };
//# sourceMappingURL=index.modern.js.map