The first step is to create html page and add links to the javascript files and css dependencies to your project. The jqxLoader widget requires the following files:
<div id="jqxLoader"></div>
<script type="text/javascript"> $(document).ready(function () { $("#jqxLoader").jqxLoader({ width: 250, height: 150, autoOpen: true }); });</script>
To set a property(option), you need to pass the property name and value(s) in the jqxLoader's constructor.$("#jqxLoader").jqxLoader('open');
To get a property(option), you need to pass the property name to the jqxLoader's constructor.$("#jqxLoader").jqxLoader({ height: "150px" });
To bind to an event of a UI widget, you can use basic jQuery syntax. The example code below demonstrates how to bind to the "create" event of jqxLoader.var height = $("#jqxLoader").jqxLoader("height");
// bind to create event.$('#jqxLoader').on('create', function () {alert("jqxLoader is created!");});
<!DOCTYPE html><html lang="en"><head> <title>jQuery Loader Sample</title> <link type="text/css" rel="Stylesheet" href="../../jqwidgets/styles/jqx.base.css" /> <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxloader.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript"> $(document).ready(function () { $("#openLoader").jqxButton({ width: 150 }); $("#jqxLoader").jqxLoader({ width: 250, height: 150 }); $('#openLoader').on('click', function () { $('#jqxLoader').jqxLoader('open'); }); $("#closeLoader").jqxButton({ width: 100 }); $('#closeLoader').on('click', function () { $('#jqxLoader').jqxLoader('close'); }); }); </script><script async src="https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-2FX5PV9DNT');</script></head><body> <div id="jqxLoader"> </div> <input type="button" value="Open Loader" id="openLoader" /> <input type="button" value="Close" id="closeLoader" /></body></html>