Properties

NameTypeDefault
autoOpen boolean false

Sets or gets whether the loader will be shown after it's creation. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxLoader, { ILoaderProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxloader';
 
class App extends React.PureComponent<{}, ILoaderProps> {
  private myLoader = React.createRef<JqxLoader>();  
  
  public render() {
    return (
      <JqxLoader ref={this.myLoader} 
        autoOpen={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
height string | number 150

Sets or gets the loader's height. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxLoader, { ILoaderProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxloader';
 
class App extends React.PureComponent<{}, ILoaderProps> {
  private myLoader = React.createRef<JqxLoader>();  
  
  public render() {
    return (
      <JqxLoader ref={this.myLoader} 
        autoOpen={true} height={200}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
html string null

Sets the loader's content. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxLoader, { ILoaderProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxloader';
 
class App extends React.PureComponent<{}, ILoaderProps> {
  private myLoader = React.createRef<JqxLoader>();  
  
  public render() {
    return (
      <JqxLoader ref={this.myLoader} 
        autoOpen={true} html={'custom HTML string'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
isModal boolean false

Sets or gets whether the loader is displayed as a modal dialog. If the jqxLoader's mode is set to modal, the loader blocks user interaction with the underlying user interface. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxLoader, { ILoaderProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxloader';
 
class App extends React.PureComponent<{}, ILoaderProps> {
  private myLoader = React.createRef<JqxLoader>();  
  
  public render() {
    return (
      <JqxLoader ref={this.myLoader} 
        autoOpen={true} isModal={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
imagePosition LoaderImagePosition 'center'
LoaderImagePosition: "center" | "top" | "bottom"

Sets or gets the image's position. Possible values: 'top', 'bottom' and 'center' 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxLoader, { ILoaderProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxloader';
 
class App extends React.PureComponent<{}, ILoaderProps> {
  private myLoader = React.createRef<JqxLoader>();  
  
  public render() {
    return (
      <JqxLoader ref={this.myLoader} 
        autoOpen={true} imagePosition={'top'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
rtl boolean false

Sets or gets a value indicating whether widget's text is aligned to support locales using right-to-left fonts. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxLoader, { ILoaderProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxloader';
 
class App extends React.PureComponent<{}, ILoaderProps> {
  private myLoader = React.createRef<JqxLoader>();  
  
  public render() {
    return (
      <JqxLoader ref={this.myLoader} 
        autoOpen={true} rtl={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
text number | string "Loading..."

Sets or gets the loader's text. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxLoader, { ILoaderProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxloader';
 
class App extends React.PureComponent<{}, ILoaderProps> {
  private myLoader = React.createRef<JqxLoader>();  
  
  public render() {
    return (
      <JqxLoader ref={this.myLoader} 
        autoOpen={true} text={'Loading files...'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
textPosition LoaderTextPosition "bottom"
LoaderTextPosition: "top" | "bottom" | "left" | "right"

Sets or gets the alignment. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxLoader, { ILoaderProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxloader';
 
class App extends React.PureComponent<{}, ILoaderProps> {
  private myLoader = React.createRef<JqxLoader>();  
  
  public render() {
    return (
      <JqxLoader ref={this.myLoader} 
        autoOpen={true} textPosition={'left'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
theme string '' 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxLoader, { ILoaderProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxloader';
 
class App extends React.PureComponent<{}, ILoaderProps> {
  private myLoader = React.createRef<JqxLoader>();  
  
  public render() {
    return (
      <JqxLoader ref={this.myLoader} 
        autoOpen={true} theme={'material'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
width string | number 150

Sets or gets the jqxLoader's width. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxLoader, { ILoaderProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxloader';
 
class App extends React.PureComponent<{}, ILoaderProps> {
  private myLoader = React.createRef<JqxLoader>();  
  
  public render() {
    return (
      <JqxLoader ref={this.myLoader} 
        autoOpen={true} width={200}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Methods

NameArgumentsReturn Type
close None

Closing the current loader.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxLoader, { ILoaderProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxloader';
 
class App extends React.PureComponent<{}, ILoaderProps> {
  private myLoader = React.createRef<JqxLoader>();
 
  public componentDidMount(): void {
    this.myLoader.current!.close();
  }
   
  
  public render() {
    return (
      <JqxLoader ref={this.myLoader} 
        autoOpen={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
open left, top

Opening/showing the current loader. You can optionally call the method with left and top arguments

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxLoader, { ILoaderProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxloader';
 
class App extends React.PureComponent<{}, ILoaderProps> {
  private myLoader = React.createRef<JqxLoader>();
 
  public componentDidMount(): void {
    this.myLoader.current!.open(200,50);
  }
   
  
  public render() {
    return (
      <JqxLoader ref={this.myLoader} 
        autoOpen={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);