CODEWITHSUNDEEP
jquerycssanimationloader
syed1234
syed1234

Reputation: 835

How to separate loader with message

I am trying to separate message with loader, message is displaying under the loader which is not right I want the loader to separate or somewhere right side of the message:

My jQuery function:

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

  },

My Css file for loader:

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

I have also attached the screen shot of output currently I am having:

enter image description here

You can see in picture message is displaying with the loader, how I can separate loader from message so it should be at left side of message.

Upvotes: 0

Views: 189

Answers (1)

wanovak
wanovak

Reputation: 6127

Your problem is that you're animating the entire container. To me, your intent seems to be to create a spinner and animate that, while having static text appear near the loader. To accomplish that most simply, you can:

Change this:

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

to

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

Your text may not be positioned where you want, in which case I'd suggest wrapping the h2 and blockquote with another div, adding CSS width to messages-container, and float: left to both messages-warning and the new div you just added. That could look like this:

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

Upvotes: 0

Related Questions