<div class="box">    <img class="boxlist" src="your-image-url.jpg" alt="Description of image">    <div class="loader" id="loader"></div> </div>

<style>
.box {    position: relative;    display: inline-block; /* or block, depending on your layout */ } .box img {    display: block; /* removes space below image */    width: 100%; /* or specific size */    height: auto; /* maintains aspect ratio */ } .loader {    border: 16px solid #f3f3f3; /* Light grey */    border-top: 16px solid #3498db; /* Blue */    border-radius: 50%;    width: 120px;    height: 120px;    animation: spin 2s linear infinite;    position: absolute;    top: 50%;    left: 50%;    transform: translate(-50%, -50%);    display: none; /* Initially hidden */ } @keyframes spin {    0% { transform: rotate(0deg); }    100% { transform: rotate(360deg); } }</style>

<script type="text/javascript"> document.addEventListener('DOMContentLoaded', function() {    var img = document.querySelector('.boxlist');    var loader = document.getElementById('loader');    // Show loader    img.onload = function() {        loader.style.display = 'none'; // Hide loader once image is loaded    };    // Optionally show loader if image fails to load    img.onerror = function() {        loader.style.display = 'none'; // Hide loader if error occurs, you may want to show an error message instead        // Optionally, you can replace the src with a placeholder image        img.src = 'placeholder-image-url.jpg';    };    // Initially show loader    loader.style.display = 'block'; }); </script>