Tengo una página web para obtener los datos relacionados con el usuario y una gran cantidad de imágenes. El problema es que mientras cargaba la página tomó más tiempo debido a las imágenes, las imágenes se representan en div separados en la página. Así que quiero el cargador giratorio para ese div en particular.
Nota: sé cómo implementar para la carga de la página. Solo necesito un div particular.
Solo mire a continuación mi idea de implementación.
<body> <div id="divUserContent"> </div> <div id="divuserimages"> </div> </body>Solo asegúrese de que el elemento principal del elemento de carga tenga una posición establecida en relativa. Vea este ejemplo a continuación.
body { margin: 0px; font-size: 16px; } .container { background: rgba(0,0,0,.2); height: 100vh; align-items: center; justify-content: center; display: flex; position: relative; } .loading-container { padding: 10rem; border: 1px solid #000; position: relative; /* this keeps .loading-text inside it */ width: 5rem; } .loading-text { position: absolute; top: 50%; left: 50%; margin-top: -9px; /* take .loading-text height, divide by -2 */ margin-left: -35px; /* take .loading-text width, dividide by -2*/ } <div class="container"> <div class="loading-container"> <div class="loading-text">Loading...</div> </div> </div>