Documentation

Styling and Appearance

jQWidgets uses a pair of css files - jqx.base.css and jqx.[theme name].css. The base stylesheet creates the styles related to the widget's layout like margin, padding, border-width, position. The second css file applies the widget's colors and backgrounds. The jqx.base.css should be included before the second CSS file.

Below is the list of CSS classes used by jqxLoader.
  • jqx-widget - applied to the Loader widget.
  • jqx-loader - applied to the jqxLoader.
  • jqx-loader-ie-transparency - apply transperant background to the jqxLoader IE browser.
  • jqx-loader-modal - applied modal background styles to jqxLoader.
  • jqx-loader-icon - applied styles to icon in jqxLoader.
  • jqx-loader-text - applied styles to text in jqxLoader.
  • jqx-loader-text-left - applied styles to position text in left side of the image in jqxLoader.
  • jqx-loader-text-right - applied styles to position text in right side of the image in jqxLoader.
  • jqx-loader-text-top - applied styles to position text in top side of the image in jqxLoader.
  • jqx-loader-text-bottom - applied styles to position text in bottom side of the image in jqxLoader.
  • jqx-loader-rtl - apply right-to-left direction to jqxLoader's text.
When you create a custom style with colors and backgrounds for jqxLoader, you need to do the following:
  • Add the above CSS classes related to jqxLoader
  • To apply your custom style to open and close buttons and jqxLoader, you need to set its 'theme' property(option) to point to your theme name string.
  • The sample below demonstrates how to set the 'metro' theme to open and close buttons and jqxLoader. 
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>jQuery Loader Styling Sample</title>
        <link type="text/css" rel="Stylesheet" href="../../jqwidgets/styles/jqx.base.css" />
        <link type="text/css" rel="Stylesheet" href="../../jqwidgets/styles/jqx.metro.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,
                    theme: "metro"
                });
                $("#jqxLoader").jqxLoader({ width: 250, height: 150, theme: "metro" });
                $('#openLoader').on('click', function () {
                    $('#jqxLoader').jqxLoader('open');
                });
                $("#closeLoader").jqxButton({
                    width: 100,
                    theme: "metro"
                });
                $('#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>