pouncejs/dist/esm/components/ProgressBar/ProgressBar.js

A collection of UI components from Panther labs

import React from 'react';
import Box from '../Box';

var ProgressBar = function ProgressBar(_ref) {
  var progress = _ref.progress,
      _ref$thickness = _ref.thickness,
      thickness = _ref$thickness === void 0 ? 5 : _ref$thickness,
      color = _ref.color;
  return /*#__PURE__*/React.createElement(Box, {
    width: 1,
    position: "relative"
  }, /*#__PURE__*/React.createElement(Box, {
    height: thickness,
    backgroundColor: "white",
    backgroundOpacity: 0.1,
    borderRadius: "pill",
    zIndex: 0
  }), /*#__PURE__*/React.createElement(Box, {
    position: "absolute",
    borderRadius: "pill",
    bottom: 0,
    height: thickness,
    width: progress,
    backgroundColor: color,
    transition: "width 100ms cubic-bezier(0.0, 0, 0.2, 1) 0ms, background-color 100ms cubic-bezier(0.0, 0, 0.2, 1) 0ms",
    zIndex: 1
  }));
};

export default ProgressBar;