HelpBot Assistant

How can I help you?

Spinner and progress in React Progress button component

2 Mar 202615 minutes to read

Spinner

Control the appearance and behavior of the animated spinner indicator shown during progress operations.

Change spinner position

Customize the spinner’s location relative to button content by modifying the position property in spinSettingsModel. By default, the spinner appears on the left side of the button text. Reposition it to left, right, top, bottom, or center based on your layout preferences.

Change spinner size

Adjust the spinner dimensions by modifying the width property in spinSettingsModel. This allows you to scale the spinner icon up or down to match your button size and visual hierarchy. In the demo below, the width is set to 20 pixels to create a smaller spinner.

Spinner template

Create a custom spinner design by specifying the template property in spinSettingsModel. Use HTML or SVG markup with custom CSS styles to replace the default animated spinner with your own branded animation or icon.

The following sample demonstrates the above functionalities of the spinner.

import { ProgressButtonComponent } from '@syncfusion/ej2-react-splitbuttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
function App() {
    let spinSettings = { position: 'Right', width: 20, template: '<div class="template"></div>' };
    return (<ProgressButtonComponent content='Submit' spinSettings={spinSettings}/>);
}
export default App;
ReactDom.render(<App />, document.getElementById('progress-button'));
import { ProgressButtonComponent, SpinSettingsModel } from '@syncfusion/ej2-react-splitbuttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';

function App() {

  let spinSettings : SpinSettingsModel = { position: 'Right', width: 20, template: '<div class="template"></div>' };

  return (
    <ProgressButtonComponent content='Submit' spinSettings={spinSettings}/>
  );
}
export default App;
ReactDom.render(<App />, document.getElementById('progress-button'));

Progress

Visual progress indicators and animations provide feedback during long-running operations.

Content animation

Animate the ProgressButton text or content during progress operations using the effect property in animationSettingsModel. Control animation timing with the duration and easing properties.

Available animation effects are:

  • None - No animation
  • SlideLeft - Content slides from right to left
  • SlideRight - Content slides from left to right
  • SlideUp - Content slides upward
  • SlideDown - Content slides downward
  • ZoomIn - Content scales up (zooms in)
  • ZoomOut - Content scales down (zooms out)
import { ProgressButtonComponent } from '@syncfusion/ej2-react-splitbuttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
function App() {
    let animationSettings = { effect: 'SlideLeft', duration: 500, easing: 'linear' };
    let spinSettings = { position: 'Center' };
    return (<ProgressButtonComponent content='Slide Left' enableProgress={true} animationSettings={animationSettings} spinSettings={spinSettings}/>);
}
export default App;
ReactDom.render(<App />, document.getElementById('progress-button'));
import { AnimationSettingsModel, ProgressButtonComponent, SpinSettingsModel } from '@syncfusion/ej2-react-splitbuttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';

function App() {

  let animationSettings: AnimationSettingsModel = { effect: 'SlideLeft',  duration: 500, easing: 'linear' };
  let spinSettings : SpinSettingsModel = { position: 'Center' };

  return (
    <ProgressButtonComponent content='Slide Left' enableProgress = {true} animationSettings={animationSettings} spinSettings={spinSettings}/>
  );
}
export default App;
ReactDom.render(<App />, document.getElementById('progress-button'));

Change step of the ProgressButton

Control the granularity of progress visualization by modifying the step property in the begin event. The step value determines how much the progress bar advances on each update. For example, setting step to 20 displays progress in 5% increments (100 ÷ 20), creating a smooth visual progression for the user.

import { ProgressButtonComponent } from '@syncfusion/ej2-react-splitbuttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
function App() {
    function begin(args) {
        args.step = 20;
    }
    return (<ProgressButtonComponent content='Progress Step' enableProgress={true} begin={begin} cssClass='e-hide-spinner'/>);
}
export default App;
ReactDom.render(<App />, document.getElementById('progress-button'));
import { ProgressButtonComponent, ProgressEventArgs } from '@syncfusion/ej2-react-splitbuttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';

function App() {

  function begin(args: ProgressEventArgs): void {
      args.step = 20;
  }

  return (
    <ProgressButtonComponent content='Progress Step' enableProgress = {true} begin={begin} cssClass='e-hide-spinner'/>
  );
}
export default App;
ReactDom.render(<App />, document.getElementById('progress-button'));

The class e-hide-spinner hides the spinner in the ProgressButton, For more information, see hide spinner section.

Change progress dynamically

Update the progress percentage in real-time by modifying the percent property during ProgressButton events. This technique enables conditional progress adjustments based on application logic. For example, you can jump the progress to 90% when a particular milestone is reached at 40% completion, allowing for non-linear progress visualization.

import { ProgressButtonComponent } from '@syncfusion/ej2-react-splitbuttons';
import { useState } from "react";
import * as React from 'react';
import * as ReactDom from 'react-dom';
function App() {
    const [state, setState] = useState({
        content: 'Progress'
    });
    return (<ProgressButtonComponent content={state.content} enableProgress={true} duration={15000} begin={begin} progress={progress} end={end} cssClass='e-hide-spinner'/>);
    function begin(args) {
        setState({ content: 'Progress ' + args.percent + '%' });
    }
    function progress(args) {
        setState({ content: 'Progress ' + args.percent + '%' });
        if (args.percent === 40) {
            args.percent = 90;
        }
    }
    function end(args) {
        setState({ content: 'Progress ' + args.percent + '%' });
    }
}
export default App;
ReactDom.render(<App />, document.getElementById('progress-button'));
import { ProgressButtonComponent, ProgressEventArgs } from '@syncfusion/ej2-react-splitbuttons';
import { useState } from "react";
import * as React from 'react';
import * as ReactDom from 'react-dom';

function App() {
  const [state, setState] = useState({
    content: 'Progress'
  });

    return (
      <ProgressButtonComponent content={state.content} enableProgress = {true} duration={15000} begin={begin} progress={progress} end={end} cssClass='e-hide-spinner'/>
    );

  function begin(args: ProgressEventArgs): void {
    setState({ content: 'Progress ' + args.percent + '%' });
  }

  function progress(args: ProgressEventArgs): void {
    setState({ content: 'Progress ' + args.percent + '%' });
    if (args.percent === 40) {
      args.percent = 90;
    }
  }

  function end(args: ProgressEventArgs): void {
    setState({ content: 'Progress ' + args.percent + '%' });
  }
}
export default App;
ReactDom.render(<App />, document.getElementById('progress-button'));

The method dataBind applies the property changes immediately to the component.

Start and stop methods

Control progress playback by invoking the start and stop methods. Use these methods to pause long-running operations or allow users to resume interrupted tasks. In the example below, clicking the ProgressButton toggles between paused and active states.

import { ProgressButtonComponent } from '@syncfusion/ej2-react-splitbuttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { useState } from "react";
function App() {
    let progressBtn;
    const [state, setState] = useState({
        content: 'Download',
        iconCss: 'e-btn-sb-icon e-download'
    });
    return (<ProgressButtonComponent content={state.content} enableProgress={true} duration={4000} iconCss={state.iconCss} end={end} cssClass='e-hide-spinner' onClick={clickHandler} ref={(scope) => { progressBtn = scope; }} />);
    function end() {
        setState({ content: 'Download', iconCss: 'e-btn-sb-icon e-download' });
    }
    function clickHandler() {
        if (state.content === 'Download') {
            setState({ content: 'Pause', iconCss: 'e-btn-sb-icon e-pause' });
        }
        else if (state.content === 'Pause') {
            setState({ content: 'Resume', iconCss: 'e-btn-sb-icon e-play' });
            progressBtn.stop();
        }
        else if (state.content === 'Resume') {
            setState({ content: 'Pause', iconCss: 'e-btn-sb-icon e-pause' });
            progressBtn.start();
        }
    }
}
export default App;
ReactDom.render(<App />, document.getElementById('progress-button'));
import { ProgressButtonComponent } from '@syncfusion/ej2-react-splitbuttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { useState } from "react";

function App() {
  let progressBtn: ProgressButtonComponent;
  const [state, setState] = useState({
    content: 'Download',
    iconCss: 'e-btn-sb-icon e-download'
  });

  return (
    <ProgressButtonComponent content={state.content} enableProgress={true} duration={4000}
      iconCss={state.iconCss} end={end} cssClass='e-hide-spinner' onClick={clickHandler} ref={(scope) => { progressBtn = scope as ProgressButtonComponent; }} />
  );

  function end(): void {
    setState({ content: 'Download', iconCss: 'e-btn-sb-icon e-download' });
  }

  function clickHandler(): void {
    if (state.content === 'Download') {
      setState({ content: 'Pause', iconCss: 'e-btn-sb-icon e-pause' });
    }
    else if (state.content === 'Pause') {
      setState({ content: 'Resume', iconCss: 'e-btn-sb-icon e-play' });
      progressBtn.stop();
    }
    else if (state.content === 'Resume') {
      setState({ content: 'Pause', iconCss: 'e-btn-sb-icon e-pause' });
      progressBtn.start();
    }
  }
}
export default App;
ReactDom.render(<App />, document.getElementById('progress-button'));

See Also