javascript - react : How can I position the loading component so it is in the center of the image

Question

这是代码和演示:

https://codesandbox.io/s/sparkling-silence-7cv3l

https://7cv3l.csb.app/

我使用 react-image-enlarger 组件来缩放图像，例如 Medium。它有一个 API，renderLoading 用于在下载放大图像时呈现加载组件。所以我为加载组件导入了react-loading。

相关代码片段:

<div style={{ margin: "0.25rem" }}>
      <Image
        style={{ width: "200px", height: "auto" }}
        zoomed={zoomed}
        src={src}
        enlargedSrc={{}}
        onClick={() => setZoomed(true)}
        onRequestClose={() => setZoomed(false)}
        renderLoading={<ReactLoading type={"cylon"} color="black" />}
      />
    </div>

现在加载动画出现在图像下方。

但是我想让加载动画位于图像的中心并且应该对图像应用滤镜以使其更暗(可能是亮度(0.7);)

我认为这不是一项微不足道的工作，因为每张图片都有自己的高度和宽度，而且我不是很擅长 CSS，因此非常感谢任何帮助。

Answer 1

尝试使用此 CSS 代码将加载器的位置设置在每张图片的中心。

img.EnlargedImage__Image + div {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    background-color: rgba(255, 255, 255, 0.75);
    height: 100% !important;
    width: 100% !important;
}
img.EnlargedImage__Image + div svg {
    height: 64px;
    width: 64px;
    margin: auto;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
}