AJAX loading ...

pulsar.scss

.change_pending {
  box-shadow: 0 0 10px 2px #eee;
  -webkit-animation: scaleout 1.0s infinite ease-in-out;
  animation: scaleout 1.0s infinite ease-in-out;
}

@-webkit-keyframes scaleout {
  0% { -webkit-transform: scale(0.0) }
  100% { -webkit-transform: scale(1.0); opacity: 0; }
}

@keyframes scaleout {
  0% { transform: scale(0.0); -webkit-transform: scale(0.0); }
  100% { transform: scale(1.0); -webkit-transform: scale(1.0); opacity: 0; }
}

spinner.scss

.change_pending {
  box-shadow: 0 0 10px 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;
}
@-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; }
}