@razorpay/blade
Version:
The Design System that powers Razorpay
63 lines (59 loc) • 1.77 kB
JavaScript
import '../../tokens/global/index.js';
import { size } from '../../tokens/global/size.js';
var indeterminateAnimation = {
scaleXInitial: 1,
scaleXMid: 5,
scaleXFinal: 1,
leftInitial: '-8%',
leftMid: '50%',
leftFinal: '103%',
fillWidth: '5%'
};
var pulseAnimation = {
opacityInitial: 0,
opacityMid: 0.25,
opacityFinal: 0,
backgroundColor: 'white'
};
var circularProgressSizeTokens = {
small: {
size: size[24],
strokeWidth: size[3],
percentTextSize: 'small'
},
medium: {
size: size[48],
strokeWidth: size[5],
percentTextSize: 'small'
},
large: {
size: size[72],
strokeWidth: size[7],
percentTextSize: 'medium'
}
};
var getCircularProgressSVGTokens = function getCircularProgressSVGTokens(_ref) {
var size = _ref.size,
progressPercent = _ref.progressPercent;
// Size of the enclosing square
var sqSize = circularProgressSizeTokens[size].size;
var strokeWidth = circularProgressSizeTokens[size].strokeWidth;
// SVG centers the stroke width on the radius, subtract out so circle fits in square
var radius = (sqSize - strokeWidth) / 2;
// Enclose circle in a circumscribing square
var viewBox = "0 0 ".concat(sqSize, " ").concat(sqSize);
// Arc length at 100% coverage is the circle circumference
var dashArray = radius * Math.PI * 2;
// Scale 100% coverage overlay with the actual percent
var dashOffset = dashArray - dashArray * progressPercent / 100;
return {
sqSize: sqSize,
strokeWidth: strokeWidth,
radius: radius,
viewBox: viewBox,
dashArray: dashArray,
dashOffset: dashOffset
};
};
export { circularProgressSizeTokens, getCircularProgressSVGTokens, indeterminateAnimation, pulseAnimation };
//# sourceMappingURL=progressBarTokens.js.map