Ajax Validation Spinner effect

Create your form

First you will need to create a form from Components > RSForm!Pro > Manage forms > New or New (Wizard). Let's take the following form as an example, on the first screenshot you'll see the simple form before clicking on the Submit button and in the second screenshot you'll see the spinner in action.

Add the CSS code

Edit your form > go to Form Properties > CSS & JavaScript > CSS area and add the following code (this is fully customizable according to your needs):

<style>
.overlay__open {
    position: relative;
}
.overlay {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: 0.9;
    background: #222;
    z-index: 9999;
}
.overlay__inner {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    position: absolute;
}
.overlay__content {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}
.spinner {
    width: 75px;
    height: 75px;
    display: inline-block;
    border-width: 2px;
    border-color: rgba(255, 255, 255, 0.05);
    border-top-color: #fff;
    animation: spin 1s infinite linear;
    border-radius: 100%;
    border-style: solid;
}
@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}
</style>

Add the PHP Script

Next you will need to add a custom script in the 'Script called before form is generated' area, found under Form Properties while editing your form.

JFactory::getApplication()->registerEvent('onRsformFrontendAJAXScriptCreate', 'addValidationToForm');

function addValidationToForm($args)
{
  if ($args instanceof \Joomla\Event\Event)
  {
    $args = $args->getArguments();
    $args = reset($args);
  }

  $script = &$args['script'];
  $formId = $args['formId'];

  $script .= <<<EOF

  var form = RSFormPro.getForm({$formId});

  switch (task)
  {
    case 'beforeSend':
      var overlay = document.createElement('div');
      overlay.classList.add('overlay');

      var overlay__inner = document.createElement('div');
      overlay__inner.classList.add('overlay__inner');

      var overlay__content = document.createElement('div');
      overlay__content.classList.add('overlay__content');

      var spinner = document.createElement('span');
      spinner.classList.add('spinner');

      overlay__content.appendChild(spinner);
      overlay__inner.appendChild(overlay__content);
      overlay.appendChild(overlay__inner);

      form.appendChild(overlay);
      form.classList.add('overlay__open');
    break;

    case 'afterSend':
      var overlay = document.querySelector('.overlay');

      if (overlay)
      {
        overlay.parentNode.removeChild(overlay);
      }

      form.classList.remove('overlay__open');
    break;
  }
  EOF;
}