通过ajax方式在界面上加载loading状态(仅作记录)

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd,
q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt,
dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot,
thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby, section, summary, time,
mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
}

article, aside, details, figcaption, figure, footer, header, hgroup,
menu, nav, section {
    display: block
}

body {
    line-height: 1
}

ol, ul {
    list-style: none
}

blockquote, q {
    quotes: none
}

blockquote:before, blockquote:after, q:before, q:after {
    content: '';
    content: none
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

/* BODY {
  background: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0) 48%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0) 52%), -webkit-linear-gradient(135deg, rgba(255, 255, 255, 0) 48%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0) 52%);
  background: linear-gradient(45deg, rgba(255, 255, 255, 0) 48%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0) 52%), linear-gradient(-45deg, rgba(255, 255, 255, 0) 48%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0) 52%);
  -webkit-background-size: 1em 1em;
  background-size: 1em 1em;
  background-color: #000;
} */

.l-wrapper {
  position: absolute;
  width: 480px;
  height: 300px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  text-align: center;
}

svg {
  height: 120px;
  width: 120px;
  margin: 0 2em 2em;
  overflow: visible;
  /*   border: 1px solid red; */
}

.g-circles {
  -webkit-transform: scale(0.9) translate(7px, 7px);
  -ms-transform: scale(0.9) translate(7px, 7px);
  transform: scale(0.9) translate(7px, 7px);
}

circle {
  fill: dodgerblue;
  fill-opacity: 0;
  -webkit-animation: opacity 1.2s linear infinite;
  animation: opacity 1.2s linear infinite;
}
circle:nth-child(12n + 1) {
  -webkit-animation-delay: -0.1s;
  animation-delay: -0.1s;
}
circle:nth-child(12n + 2) {
  -webkit-animation-delay: -0.2s;
  animation-delay: -0.2s;
}
circle:nth-child(12n + 3) {
  -webkit-animation-delay: -0.3s;
  animation-delay: -0.3s;
}
circle:nth-child(12n + 4) {
  -webkit-animation-delay: -0.4s;
  animation-delay: -0.4s;
}
circle:nth-child(12n + 5) {
  -webkit-animation-delay: -0.5s;
  animation-delay: -0.5s;
}
circle:nth-child(12n + 6) {
  -webkit-animation-delay: -0.6s;
  animation-delay: -0.6s;
}
circle:nth-child(12n + 7) {
  -webkit-animation-delay: -0.7s;
  animation-delay: -0.7s;
}
circle:nth-child(12n + 8) {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}
circle:nth-child(12n + 9) {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}
circle:nth-child(12n + 10) {
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}
circle:nth-child(12n + 11) {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}
circle:nth-child(12n + 12) {
  -webkit-animation-delay: -1.2s;
  animation-delay: -1.2s;
}

.g-circles--v2 circle {
  fill-opacity: 0;
  stroke-opacity: 0;
  stroke-width: 1;
  stroke: yellowgreen;
  -webkit-animation-name: opacity-stroke, colors, colors-stroke, transform-2;
  animation-name: opacity-stroke, colors, colors-stroke, transform-2;
}

.g-circles--v3 circle {
  fill-opacity: 1;
  -webkit-animation-name: opacity, colors;
  animation-name: opacity, colors;
}

.g-circles--v4 circle {
  fill-opacity: 1;
  fill: orange;
  -webkit-transform-origin: 60px 60px;
  -ms-transform-origin: 60px 60px;
  transform-origin: 60px 60px;
  -webkit-animation-name: opacity, colors-3, transform;
  animation-name: opacity, colors-3, transform;
}

@-webkit-keyframes opacity {
  3% {
    fill-opacity: 1;
  }

  75% {
    fill-opacity: 0;
  }
}

@keyframes opacity {
  3% {
    fill-opacity: 1;
  }

  75% {
    fill-opacity: 0;
  }
}
@-webkit-keyframes opacity-stroke {
  10% {
    stroke-opacity: 1;
  }

  85% {
    stroke-opacity: 0;
  }
}
@keyframes opacity-stroke {
  10% {
    stroke-opacity: 1;
  }

  85% {
    stroke-opacity: 0;
  }
}
@-webkit-keyframes colors {
  0% {
    fill: yellowgreen;
  }

  10% {
    fill: gold;
  }

  75% {
    fill: crimson;
  }
}
@keyframes colors {
  0% {
    fill: yellowgreen;
  }

  10% {
    fill: gold;
  }

  75% {
    fill: crimson;
  }
}
@-webkit-keyframes colors-stroke {
  0% {
    stroke: yellowgreen;
  }

  10% {
    stroke: gold;
  }

  75% {
    stroke: crimson;
  }
}
@keyframes colors-stroke {
  0% {
    stroke: yellowgreen;
  }

  10% {
    stroke: gold;
  }

  75% {
    stroke: crimson;
  }
}
@-webkit-keyframes colors-2 {
  0% {
    fill: yellow;
  }

  50% {
    fill: red;
  }

  65% {
    fill: orangered;
  }

  95% {
    fill: gold;
  }
}
@keyframes colors-2 {
  0% {
    fill: yellow;
  }

  50% {
    fill: red;
  }

  65% {
    fill: orangered;
  }

  95% {
    fill: gold;
  }
}
@-webkit-keyframes colors-3 {
  0% {
    fill: yellowgreen;
  }

  50% {
    fill: turquoise;
  }

  65% {
    fill: yellow;
  }

  95% {
    fill: orange;
  }
}
@keyframes colors-3 {
  0% {
    fill: yellowgreen;
  }

  50% {
    fill: turquoise;
  }

  65% {
    fill: yellow;
  }

  95% {
    fill: orange;
  }
}
@-webkit-keyframes transform {
  10% {
    -webkit-transform: scale(0.75);
    transform: scale(0.75);
  }
}
@keyframes transform {
  10% {
    -webkit-transform: scale(0.75);
    transform: scale(0.75);
  }
}
@-webkit-keyframes transform-2 {
  40% {
    -webkit-transform: scale(0.85);
    transform: scale(0.85);
  }

  60% {
    stroke-width: 20;
  }
}
@keyframes transform-2 {
  40% {
    -webkit-transform: scale(0.85);
    transform: scale(0.85);
  }

  60% {
    stroke-width: 20;
  }
}

<!DOCTYPE>
<html>
<head>
  <meta charset="utf-8"><link rel="stylesheet" href="reset.css">
  <link rel="stylesheet" href="style.css" media="screen" type="text/css"> 
</head>

<body>
<form class="form-horizontal "  id="my_servers_id" method = 'post' >
    {% csrf_token %}
       <div id='table_server'style="overflow-y: auto; height: 300px;">
           ...
           ...
           ...
      </div> 
    <button  class="btn btn-info" style="140px" type="button" onclick="ajax_loading('my_servers_id','{% url 'videomap-urls:check-user-servers-state' %}','start_server_id')" id='start_server_id' name='start_server_name' value='start_server' >
     <i class="icon icon-play-circle"></i> Start </button>
</form>   
<div class="l-wrapper" id='loading' style='200px;heigth:200px;display:none'>
    <svg viewBox="0 0 120 120" >
      <g id="circle" class="g-circles g-circles--v1">
          <circle id="12" transform="translate(35, 16.698730) rotate(-30) translate(-35, -16.698730) " cx="35" cy="16.6987298" r="10"></circle>
          <circle id="11" transform="translate(16.698730, 35) rotate(-60) translate(-16.698730, -35) " cx="16.6987298" cy="35" r="10"></circle>
          <circle id="10" transform="translate(10, 60) rotate(-90) translate(-10, -60) " cx="10" cy="60" r="10"></circle>
          <circle id="9" transform="translate(16.698730, 85) rotate(-120) translate(-16.698730, -85) " cx="16.6987298" cy="85" r="10"></circle>
          <circle id="8" transform="translate(35, 103.301270) rotate(-150) translate(-35, -103.301270) " cx="35" cy="103.30127" r="10"></circle>
          <circle id="7" cx="60" cy="110" r="10"></circle>
          <circle id="6" transform="translate(85, 103.301270) rotate(-30) translate(-85, -103.301270) " cx="85" cy="103.30127" r="10"></circle>
          <circle id="5" transform="translate(103.301270, 85) rotate(-60) translate(-103.301270, -85) " cx="103.30127" cy="85" r="10"></circle>
          <circle id="4" transform="translate(110, 60) rotate(-90) translate(-110, -60) " cx="110" cy="60" r="10"></circle>
          <circle id="3" transform="translate(103.301270, 35) rotate(-120) translate(-103.301270, -35) " cx="103.30127" cy="35" r="10"></circle>
          <circle id="2" transform="translate(85, 16.698730) rotate(-150) translate(-85, -16.698730) " cx="85" cy="16.6987298" r="10"></circle>
          <circle id="1" cx="60" cy="10" r="10"></circle>
      </g>
  </svg>  
</div>
<script>
function ajax_loading(form_id,url,button_id){    
    if (button_id){
        name=document.getElementById(button_id).name
        value=document.getElementById(button_id).value
        console.log(name,value)
        need_data=$('#'+form_id).serialize()+'&{0}={1}'.format(name,value)
    }else{
        need_data=$('#'+form_id).serialize()
    }    
    console.log(need_data)
    document.getElementById('loading').style.display='block';
    $.ajax({
          url:url, 
          type:"post",
          dataType: "html",
          data:need_data,
          success:function(mes){
                  $(document.body).html( mes); 
          }
        })
}
</script>
</body>
</html>