Can't get loading bar to stay within parent container

[exzizt]

Hi there! My team has been struggling this issue with quite a while. We're trying to get the loading bar to behave "properly" when it's inside a container. For example, we want to use the loading bar in a modal wrapper component like this:

    return (
      <Modal
        width={this.props.width}
        title={this.props.props.title}
        visible={this.props.isModalOpen}
        closable={false}
        footer={null}
      >
        {this.props.isViewOnly ? (
          <Button ghost className="modal__close" onClick={(event) => this.closeModal(event)}>
            <Icon type="close" />
          </Button>
        ) : (
          <Popconfirm
            placement="bottomRight"
            title="Are you sure you want to cancel?"
            okText="Yes"
            cancelText="No"
            onConfirm={(event) => this.closeModal(event)}
          >
            <Button ghost className="modal__close">
              <Icon type="close" />
            </Button>
          </Popconfirm>
        )}
        <LoadingBar
          scope="modal"
          style={{
            position: "absolute",
            top: "50px",
            left: 0,
            backgroundColor: Styles.COLOR.violet,
            width: "100%",
            height: "8px",
            zIndex: 100,
          }}
        />
        {this.props.content && (
          <AddPartyComponentWrapper
            closeModal={this.props.closeModal}
            clearOnSubmit={this.props.clearOnSubmit}
            content={this.props.content}
            childProps={this.props.props}
          />
        )}
      </Modal>
    );
  }
}

Except, the loading bar starts from the far left side of the screen and ends on the right, no matter what we do.

Any help is greatly appreciated. Here's a pic explaining the issue a bit more:

Edit: I opened a PR that provides a solution for this issue: #104

[mironov]

@exzizt Hey, thanks filing this issue. I agree that animating with width would simplify everything, and fix your issue. We actually had this type of animation prior to v2.6.0 but had to shift from it to transform as the latter was smoother at the time.

However, looks like animating with width renders pretty smoothly in modern browsers. I went ahead and released v5.0.0 that ditches the transform animation altogether.

Please let me know if it works for you. Thanks for your contribution!

[exzizt]

@exzizt Hey, thanks filing this issue. I agree that animating with width would simplify everything, and fix your issue. We actually had this type of animation prior to v2.6.0 but had to shift from it to transform as the latter was smoother at the time.

However, looks like animating with width renders pretty smoothly in modern browsers. I went ahead and released v5.0.0 that ditches the transform animation altogether.

Please let me know if it works for you. Thanks for your contribution!

Awesome! Thanks for looking into it and making a release that solves the issue. I tried it out, and v5.0.0 doesn't have the issue present. Looks good!