如何在表单顶部显示加载指示器？

Question

我正在尝试在表单顶部显示加载指示器（以覆盖它）但是很难做到...

我想在点击垃圾桶/减号或加号时显示加载指示器。我正在使用 React.js + MobX。我确实有一个布尔标志，但是很难实现将加载指示器实际放置在表单顶部（不破坏样式...）

购物车源代码：

import React, { useEffect, useContext } from "react";
import { Container, Row, Col } from "react-bootstrap";
import PromotionalCode from "./PromotionalCode";
import { observer } from "mobx-react-lite";
import { RootStoreContext } from "../../app/stores/rootStore";
import CartBody from "./CartBody";
import CartSummary from "./CartSummary";
import BasicSpinner from "../../app/common/spinners/BasicSpinner";
import Section from "../../app/common/Page/Section";
import TextContainer from "../../app/common/Page/TextContainer";

const Cart = () => {
  const rootStore = useContext(RootStoreContext);
  const {
    cart,
    total,
    discount,
    subtotal,
    loadingCart,
    loadCartOnSignIn,
    loadGuestCart,
    isChangingQuantity,
  } = rootStore.cartStore;
  const { isLoggedIn } = rootStore.userStore;

  useEffect(() => {
    if (isLoggedIn) {
      loadCartOnSignIn();
    } else {
      loadGuestCart();
    }
  }, [loadCartOnSignIn, loadGuestCart]);

  if (loadingCart)
    return (
      <div className="mt-5">
        <BasicSpinner />
      </div>
    );

  return (
    <Section className="checkout p-0">
      <TextContainer style={{ padding: "2rem 2rem 0 2rem" }}>
        <h2 className="font-weight-bold">Cart</h2>
        <p>The competition tickets currently added in the cart.</p>
      </TextContainer>
      <Container className="cart pt-0">
        {loadingCart ? (
          <BasicSpinner />
        ) : (
          <div style={isChangingQuantity ? { position: "relative" } : {}}>
            {cart?.cartItems && cart.cartItems.length !== 0 ? (
              <>
                <div className="cart__contents">
                  <div className="cart__contents__heading-container">
                    <h2>Items in your bag</h2>
                  </div>
                  <div className="cart__contents__table-wrapper">
                    <table className=" table cart__contents__table-wrapper__table">
                      <thead>
                        <tr>
                          <th scope="col">Description</th>
                          <th scope="col"></th>
                          <th scope="col"></th>
                          <th scope="col">Quantity</th>
                          <th scope="col">Price</th>
                        </tr>
                      </thead>
                      <CartBody />
                    </table>
                  </div>
                </div>

                <Container className="mt-5 ">
                  <Row className="justify-content-between cart__discount-and-total">
                    <Col md={5} className="cart__discount-and-total__discount">
                      {/* <PromotionalCode /> */}
                    </Col>
                    <Col className="cart__discount-and-total__total" md={6}>
                      <CartSummary
                        total={total}
                        subtotal={subtotal}
                        discount={discount.toString()}
                      />
                    </Col>
                  </Row>
                </Container>
              </>
            ) : (
              <div>There is no items in the cart yet.</div>
            )}
          </div>
        )}
      </Container>
    </Section>
  );
};

export default observer(Cart);

想要的结果是这样的：

有可能吗？

Answer 1

您可以对叠加层和微调器使用绝对定位。只需将它们呈现在您的表单中，在底部。

.form {
  // use relative on your form

  position: relative;
}
.overlay {
  position: absolute;

  // this will stretch overlay to fill width and height of form
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  background-color: rgba(0, 0, 0, 0.1); // some transparent grey color
}

.spinner {
  position: absolute;

  // this will place spinner in center of form
  top: 50%;
  left: 50%;

  transform: translate(-50%, -50%);
}

如何在表单顶部显示加载指示器？

How to show loading indicator on top of the form?

javascript

css

overlay

reactjs

mobx-react