Angular UI Components 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.