Как отделить загрузчик с сообщением - PullRequest
Новая
       22

Как отделить загрузчик с сообщением

0 голосов
/ 03 марта 2020

Я пытаюсь отделить сообщение от загрузчика, сообщение отображается под загрузчиком, что неправильно. Я хочу, чтобы загрузчик отделил или где-то в правой части сообщения:

Моя 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);

  },

Мой 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); }
}

Я также прикрепил снимок экрана с выводом, который у меня сейчас enter image description here

Вы можете видеть на картинке сообщение, отображаемое с загрузчиком, как я могу отделить загрузчик от сообщения, чтобы оно было слева от сообщения.

Ваша помощь будет высоко оценена ..

1 Ответ

0 голосов
/ 05 марта 2020

Ваша проблема в том, что вы анимируете весь контейнер. Мне кажется, что вы намереваетесь создать блесну и анимировать ее, имея текст c рядом с загрузчиком. Чтобы выполнить sh, что проще всего, вы можете:

Изменить это: 

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);

на 

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

Ваш текст может быть расположен не там, где вы хотите, в этом случае я бы предложил обернуть h2 и blockquote другим div, добавив CSS width к messages-container и float: left к messages-warning и к новому div, указанному вами. только что добавлен. Это может выглядеть так: 

<div class="messages-container">
  <div class="messages-warning"></div>
  <div class="messages-text">
    <h2>Network Drive Sync In process</h2>
    <blockquote>Please do not close or refresh this window during process</blockquote>
  </div>
</div>

.messages-container {
  width: 300px;
  margin: 0 auto;
}
.messages-warning, .messages-text {
  float: left;
}
...