如何用消息分隔加载程序

Question

我正在尝试与加载程序分开消息，消息显示在加载程序下，这不对，我想让加载程序分开或在消息的右侧：

我的jquery函数：

  jQuery.ajax({
  url: url,
  beforeSend: function (){
    var html = "<div class=\"messages warning\">\n" +
      "<h2>Network Drive Sync In process</h2>\n" +
      "Please do not close or refresh this window during process</blockquote></div>"
    jQuery("#block-system-main").html(html);

  },

我的Los的CSS文件：

.messages-warning {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid blue;
border-bottom: 16px solid blue;
width: 30px;
height: 30px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
 }

  @-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
  }

 @keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

我还附加了我目前具有的输出的屏幕截图>

您可以在图片消息中看到加载程序正在显示消息，我如何将Loder与消息分开，因此它应该位于消息的左侧。

非常感谢您的帮助。.>

我正在尝试使用加载程序分隔消息，在加载程序下方显示消息，这是不正确的，我希望加载程序分离或在消息的右侧：我的jquery函数：...

Answer 1

您的问题是您要对整个容器进行动画处理。对我来说，您的意图似乎是创建一个微调器并对其进行动画处理，同时在加载器附近显示静态文本。要最简单地完成此操作，您可以：

更改此：