//ajax spinner

.spinner{
  position: fixed;
  top:0;
  bottom:0;
  left:0;
  right:0;
  z-index: 9999;
  display: none;
  background-color: rgba(10, 10, 10, 0.66);
}

.ajax-spinner{
  width: 30px;
  height: 30px;
  margin: 100px auto;
  border: 8px solid #fff;
  border-right-color: transparent;
  border-radius: 50%;
  box-shadow: 0 0 25px 2px #eee;
  -webkit-animation: spin 1s linear infinite;
  -moz-animation: spin 1s linear infinite;
  -ms-animation: spin 1s linear infinite;
  -o-animation: spin 1s linear infinite;
  animation: spin 1s linear infinite;
}

.for-modal{
  //if the container background is white, we can use this class to change the color of animation
  margin: 0 auto;
  border: 8px solid black;
}

@-webkit-keyframes spin
  {
      from { -webkit-transform: rotate(0deg); opacity: 0.4; }
      50%  { -webkit-transform: rotate(180deg); opacity: 1; }
      to   { -webkit-transform: rotate(360deg); opacity: 0.4; }
  }

  @-moz-keyframes spin
  {
      from { -moz-transform: rotate(0deg); opacity: 0.4; }
      50%  { -moz-transform: rotate(180deg); opacity: 1; }
      to   { -moz-transform: rotate(360deg); opacity: 0.4; }
  }

  @-ms-keyframes spin
  {
      from { -ms-transform: rotate(0deg); opacity: 0.4; }
      50%  { -ms-transform: rotate(180deg); opacity: 1; }
      to   { -ms-transform: rotate(360deg); opacity: 0.4; }
  }

  @-o-keyframes spin
  {
      from { -o-transform: rotate(0deg); opacity: 0.4; }
      50%  { -o-transform: rotate(180deg); opacity: 1; }
      to   { -o-transform: rotate(360deg); opacity: 0.4; }
  }

  @keyframes spin
  {
      from { transform: rotate(0deg); opacity: 0.2; }
      50%  { transform: rotate(180deg); opacity: 1; }
      to   { transform: rotate(360deg); opacity: 0.2; }
  }