react-progressbar-fancy
Version:
A fancy progress bar component, with gradient styling and amazing animation.
80 lines (69 loc) • 9.22 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var React = require('react');
function styleInject(css, ref) {
if ( ref === void 0 ) ref = {};
var insertAt = ref.insertAt;
if (!css || typeof document === 'undefined') { return; }
var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.type = 'text/css';
if (insertAt === 'top') {
if (head.firstChild) {
head.insertBefore(style, head.firstChild);
} else {
head.appendChild(style);
}
} else {
head.appendChild(style);
}
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
}
var css_248z = ".green{--primary-color:#0575e6;--secondary-color:#00f260}.red{--primary-color:#f12711;--secondary-color:#f5af19}.blue{--primary-color:#0ed2f7;--secondary-color:#b2fefa}.purple{--primary-color:#7303c0;--secondary-color:#ec38bc}.progressBarFancyContainer{width:100%}.progressBarFancyContainer .labelScoreContainer{display:flex;justify-content:space-between;margin:0 10px;color:#000;font-family:Poppins,sans-serif}.progressBarFancyContainer .label{margin-left:10px}.progressBarFancyContainer .labelDarkTheme{color:#fff}.progressBarFancyContainer .progressBar{float:left;width:100%;display:flex;position:relative}.progressBarFancyContainer .progressBar>.progressTrack{position:relative;width:100%;background:linear-gradient(90deg,#f5f5f5,#c4c4c4);border-radius:10px 0 10px 0;margin-top:3px;height:8px}.progressBarFancyContainer .caretUp{transition:all 1s ease-in-out;position:absolute;top:7px;z-index:10}.progressBarFancyContainer .caretUp.caretCompare{transition:all 1s ease-in-out;color:#baf4c0;z-index:2;transition-delay:0ms}.progressBarFancyContainer .topTitlePlacement{flex:0 1 100%;padding-left:10px;font-weight:500}.progressBarFancyContainer .barGaugeContainer{display:flex;align-items:center}.progressBarFancyContainer .barGaugeContainer .progressbarWidth{width:100%}.progressBarFancyContainer .progressFill{transition:all 1s ease-in-out;position:absolute;overflow:hidden;height:15px;line-height:20px;border-radius:10px 0 10px 0;background:linear-gradient(90deg,var(--primary-color),var(--secondary-color));z-index:10}.progressBarFancyContainer .progressFill:before{content:\"\";position:absolute;width:100%;background:linear-gradient(120deg,transparent,var(--secondary-color),transparent);animation:shine 3s ease-in-out infinite;height:15px;z-index:1000}.progressBarFancyContainer .glowingEffect{filter:blur(3px)}.progressBarFancyContainer .particlesContainer{transition:all 1s ease-in-out;position:absolute;bottom:50%}.progressBarFancyContainer .particlesContainer .bigParticles{height:5px;width:5px;border-radius:50%;background:var(--secondary-color);animation:animation3 4s ease-in-out infinite;animation-delay:.5s!important;opacity:0}.progressBarFancyContainer .particlesContainer .particles{height:4px;width:4px;border-radius:50%;background:var(--secondary-color);animation:animation1 2.5s ease-in-out infinite;animation-delay:.5s!important;opacity:0}.progressBarFancyContainer .particlesContainer .particles.particles2{animation:animation6 5s ease-in-out infinite}.progressBarFancyContainer .particlesContainer .smallParticles{height:2px;width:2px;border-radius:50%;background:var(--secondary-color);animation:animation2 3s ease-in-out infinite;animation-delay:.5s!important;opacity:0}.progressBarFancyContainer .particlesContainer .smallParticles.smallParticles2{animation:animation3 5s ease-in-out infinite}.progressBarFancyContainer .particlesContainer .smallParticles.smallParticles3{animation:animation4 2.5s ease-in-out infinite}.progressBarFancyContainer .particlesContainer .smallParticles.smallParticles4{animation:animation4 3.5s ease-in-out infinite}.progressBarFancyContainer .particlesContainer .smallParticles.smallParticles5{animation:animation5 2s ease-in-out infinite}.progressBarFancyContainer .particlesContainer .smallParticles.smallParticles6{animation:animation5 2.5s ease-in-out infinite}.progressBarFancyContainer .position{position:relative;z-index:100}.progressBarFancyContainer .score{padding-left:5px;text-align:right;font-weight:bolder}.progressBarFancyContainer .yellow{color:#d89400}.progressBarFancyContainer .red{color:#fe4e5c}.progressBarFancyContainer .primary{color:#4466b0}.progressBarFancyContainer .transitionDelay{transition-delay:1s}@keyframes animation1{0%{transform:translateX(-10px) translateY(15px);opacity:0}10%{opacity:1}75%{opacity:1}to{transform:translateX(-5px) translateY(5px);opacity:0}}@keyframes animation2{0%{transform:translateX(-10px) translateY(5px);opacity:0}10%{opacity:1}75%{opacity:1}to{transform:translateX(5px) translateY(20px);opacity:0}}@keyframes animation3{0%{transform:translateX(-5px) translateY(15px);opacity:0}10%{opacity:1}75%{opacity:1}to{transform:translateX(10px) translateY(0);opacity:0}}@keyframes animation4{0%{transform:translateX(-20px) translateY(15px);opacity:0}10%{opacity:1}75%{opacity:1}to{transform:translateX(-10px) translateY(0);opacity:0}}@keyframes animation5{0%{transform:translateX(-25px) translateY(5px);opacity:0}10%{opacity:1}75%{opacity:1}to{transform:translateX(-15px) translateY(13px);opacity:0}}@keyframes animation6{0%{transform:translateX(-20px) translateY(5px);opacity:0}10%{opacity:1}75%{opacity:1}to{transform:translateX(0) translateY(17px);opacity:0}}@keyframes progressbarAnimation{0%{background-position:0 50%}50%{background-position:100% 50%}to{background-position:0 50%}}@keyframes shine{0%{left:-100%;transition-property:left}62.5%,to{left:100%;transition-property:left}}";
styleInject(css_248z);
var ProgressBar = function (props) {
var _a = React.useState(false), progressAnimation = _a[0], setProgressAnimation = _a[1];
var score = props.score, progressWidth = props.progressWidth, className = props.className, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, _b = props.progressColor, progressColor = _b === void 0 ? primaryColor || secondaryColor ? '' : 'red' : _b, label = props.label, hideText = props.hideText, darkTheme = props.darkTheme, disableGlow = props.disableGlow;
React.useEffect(function () {
setProgressAnimation(true);
});
var renderProgressFiller = function (glow) { return (React.createElement(React.Fragment, null,
React.createElement("div", { className: "progressFill " + (!(primaryColor || secondaryColor) && progressColor) + " " + (glow && 'glowingEffect'), style: {
width: progressAnimation ? (score > 3 ? score : 3) + "%" : 3,
background: "linear-gradient( to right, " + primaryColor + ", " + secondaryColor + ")",
} }),
React.createElement("div", { className: "" + (!(primaryColor || secondaryColor) && progressColor) },
React.createElement("div", { className: "particlesContainer", style: {
left: progressAnimation ? (score > 3 ? score : 3) + "%" : 3,
} },
React.createElement("div", { className: "particles" }),
React.createElement("div", { className: "smallParticles smallParticles4", style: { background: secondaryColor } }),
React.createElement("div", { className: "smallParticles smallParticles3", style: { background: secondaryColor } }),
React.createElement("div", { className: "smallParticles smallParticles2", style: { background: secondaryColor } }),
React.createElement("div", { className: "bigParticles", style: { background: secondaryColor } }),
React.createElement("div", { className: "smallParticles", style: { background: secondaryColor } }),
React.createElement("div", { className: "particles particles2", style: { background: secondaryColor } }),
React.createElement("div", { className: "smallParticles smallParticles5", style: { background: secondaryColor } }),
React.createElement("div", { className: "smallParticles smallParticles6", style: { background: secondaryColor } }))))); };
return (React.createElement("div", { className: "progressBarFancyContainer " + className, style: { width: progressWidth } },
!hideText && React.createElement("div", { className: "labelScoreContainer " + (darkTheme && "labelDarkTheme") },
React.createElement("div", { className: "label" }, label),
React.createElement("div", { className: "number" },
score,
"%")),
React.createElement("div", { className: "barGaugeContainer", style: { flexWrap: "wrap" } },
React.createElement("div", { className: "progressbarWidth", style: {
width: progressWidth,
margin: "0px 10px",
} },
React.createElement("div", { className: "progressBar" },
React.createElement("div", { className: "progressTrack" }),
renderProgressFiller(false),
!disableGlow && renderProgressFiller(true))))));
};
exports.ProgressBar = ProgressBar;
//# sourceMappingURL=index.js.map