JSFiddle - React, Tailwind, and code Playground

by Sahin Deniz

HTML

<script src="https://raw.github.com/heartcode/CanvasLoader/master/js/heartcode-canvasloader-min.js"></script>
<div id="Form">
    <a onclick="KullaniciBanla('8');"> <img id="KullaniciBanla_8" src="http://l.yimg.com/dh/ap/social/profile/profile_b48.png" alt="" width="26" height="26"> </a>
</div>

CSS

body{margin:0;padding:0;}
#Form {width:99%;height:420px;border:1px solid;}
#Form canvas{position: fixed;top: 50%;left: 50%;z-index: 1050;margin: -50px 0 0 -50px;}

JavaScript

function LoaderAc(){
    if(typeof donCLoader!="undefined"&&typeof donCLoader.timer=="number"){
        donCLoader.hide();
        return false;
    }
	var CLoader = new CanvasLoader('Form');
	CLoader.setColor('#0091ff');
	CLoader.setShape('spiral');
	CLoader.setDiameter(70);
	CLoader.setDensity(26);
	CLoader.setRange(1);
	CLoader.setSpeed(1);
	CLoader.setFPS(40);
	CLoader.show();
	donCLoader=CLoader;
	return donCLoader;
}
function KullaniciBanla(UyeID)
{
	if (confirm('Personelin durumu değiştirilsin mi?'))
	{
		LoaderAc();
		$("body").css({"cursor": 'wait'});
        $("#KullaniciBanla_"+UyeID).fadeOut(300, function(){
            $(this).remove();
            $("body").css({"cursor": ''});
			//LoaderAc();
        });
	}
}