Check out the code and demo below:
https://codesandbox.io/s/sparkling-silence-7cv3l
I recently implemented the react-image-enlarger component to enable zoom functionality for images, similar to Medium. This component offers an API called renderLoading which allows you to specify a loading component to display while the enlarged image is being downloaded. To achieve this, I included the react-loading library.
The snippet of relevant code looks like:
<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>
Currently, the loading animation appears under the image.
https://i.sstatic.net/jdhkL.png
However, my goal is to have the loading animation centered on the image with a darkening filter applied (possibly using brightness(0.7);)
I understand that achieving this may not be straightforward due to varying image sizes and my limited CSS skills. Any assistance in accomplishing this would be greatly appreciated.