Loading Animation The MTCaptcha widget comes with a default loading animation as visual placeholder while it loads additional javascript and captcha components.
mtcaptcha loading animation
Change Default Loading Style
The color of the loading border and animated dots can be customized using the ‘customStyle.loadAnimationBorderColor ’ \and ‘
and ‘customStyle.loadAnimationDotColor ’ javascript config params.
<script>
var mtcaptchaConfig = {
...
"customStyle" : {
"loadAnimationDotColor" : "#5EFF4F" ,
"loadAnimationBorderColor" : "#78DCDC"
}
};
</script>
Disable Loading Animation And Invisible Captcha
For customers using Invisible Captcha, the loading animation should be disabled via the ‘loadAnimation ’ javascript config param
<script>
var mtcaptchaConfig = {
...
"loadAnimation" : "false" ,
};
</script>
Custom Loading Animation
The loading animation can be completly customized by embedding another DIV element of class name ‘mtcaptcha-loadanimation ’ inside the MTCaptcha anchor DOM element. This has the added benefit of being very fast as it will be shown without waitng for the MTCaptcha bootstrap javascript to load.
<div class = "mtcaptcha" >
< div class = "mtcaptcha-loadanimation" >
<!-- custom loading animation here -->
</ div >
</div>
A complete example of a custom loading animation with an embeded animated gif below:
<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>.png)
