用bootstrap4和jq写一个环状旋转器来加载图片

好的，以下是一个简单的实现：

HTML代码：

<div class="spinner-wrapper">
  <div class="spinner">
    <img src="your-image.jpg">
  </div>
</div>

CSS代码：

.spinner-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 3px solid #ccc;
  border-top-color: #007bff;
  animation: spin 1s infinite linear;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

JavaScript代码：

$(document).ready(function() {
  $('.spinner-wrapper').hide(); // 隐藏旋转器，默认不显示
  $('img').on('load', function() {
    $('.spinner-wrapper').show(); // 显示旋转器
  });
});

其中，`spinner-wrapper`是一个容器，用来包裹旋转器和图片。`spinner`是旋转器本身，使用了`border-radius`属性来实现圆形，并使用了CSS动画`spin`来实现旋转。JavaScript代码用来在图片加载完成后显示旋转器。