pouncejs/dist/cjs/components/ProgressBar/ProgressBar.js

A collection of UI components from Panther labs

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.default = void 0;

var _react = _interopRequireDefault(require("react"));

var _Box = _interopRequireDefault(require("../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.default.createElement(_Box.default, {
    width: 1,
    position: "relative"
  }, /*#__PURE__*/_react.default.createElement(_Box.default, {
    height: thickness,
    backgroundColor: "white",
    backgroundOpacity: 0.1,
    borderRadius: "pill",
    zIndex: 0
  }), /*#__PURE__*/_react.default.createElement(_Box.default, {
    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
  }));
};

var _default = ProgressBar;
exports.default = _default;