Animation wird geladen

Das MTCaptcha-Widget verfügt über eine Standard-Ladeanimation als visuellen Platzhalter, während es zusätzliche JavaScript- und Captcha-Komponenten lädt.

Standard-Ladestil ändern

Die Farbe des Laderahmens und der animierten Punkte kann mit ‘customStyle.loadAnimationBorderColor’ \and ‘ angepasst werden.

and ‘customStyle.loadAnimationDotColor’ javascript config params.

  <script>    
        var mtcaptchaConfig = {
        ...
          "customStyle": {
                "loadAnimationDotColor": "#5EFF4F",
                "loadAnimationBorderColor": "#78DCDC"
               }
         };
    </script>

‍Ladeanimation und unsichtbares Captcha deaktivieren

Für Kunden, die Invisible Captcha verwenden, sollte die Ladeanimation über den JavaScript-Konfigurationsparameter ‘loadAnimation’ deaktiviert werden.

  <script>
       var mtcaptchaConfig = {
         ...
         "loadAnimation": "false",
        };
    </script>

Benutzerdefinierte Ladeanimation

Die Ladeanimation kann vollständig angepasst werden, indem ein weiteres DIV-Element der Klasse mtcaptcha-loadanimation in das MTCaptcha-Anker-DOM-Element eingebettet wird. Dies hat den zusätzlichen Vorteil, dass es sehr schnell ist, da die Animation angezeigt wird, ohne dass auf das Laden des MTCaptcha-Bootstrap-JavaScripts gewartet werden muss.

  <div class="mtcaptcha">
       <div class="mtcaptcha-loadanimation">
           <!-- custom loading animation here -->
       </div>
     </div>

Unten finden Sie ein vollständiges Beispiel einer benutzerdefinierten Ladeanimation mit einem eingebetteten animierten GIF:

<div class="mtcaptcha">
  <div class="mtcaptcha-loadanimation" 
    style="width:350px; height:115px; text-align: center; border:1px solid #dddddd; border-radius:7px; margin-top:30px; margin-bottom:30px;">
    <img id="loader-img1" class="ghost" style="margin-top:42px; width:24px; height:24px; opacity: 0.6;" src="data:image/gif;base64,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" />     
    <div style="opacity: 0.5; font:small; 
      margin-top: 10px; ">loading...</div>
  </div>
</div>