Aware Controls | JavaScript (ES5) Progress Button Demos

The Progress Button visually represents the ongoing operation to inform the user that a process is occurring in the background. This progress can be depicted using graphics along with a textual representation.

Spinner Progress Buttons

Displays a spinner at a specific position to depict that a process is running.

new ac.buttons.ProgressButton({ content: "Spinner Left" }, "#btnSpinnerLeft");
new ac.buttons.ProgressButton({ content: "Spinner Right", spinSettings: { position: "Right" } }, "#btnSpinnerRight");
new ac.buttons.ProgressButton({ content: "Spinner Top", spinSettings: { position: "Top" } }, "#btnSpinnerTop");
new ac.buttons.ProgressButton({ content: "Spinner Bottom", spinSettings: { position: "Bottom" } }, "#btnSpinnerBottom");
new ac.buttons.ProgressButton({ content: "Spinner Center", spinSettings: { position: "Center" } }, "#btnSpinnerCenter");

<button id="btnSpinnerLeft">Spinner Left</button>
<button id="btnSpinnerRight">Spinner Right</button>
<button id="btnSpinnerTop">Spinner Top</button>
<button id="btnSpinnerBottom">Spinner Bottom</button>
<button id="btnSpinnerCenter">Spinner Center</button>

Enable Progress

Displays a progress fill bar within the button to show progress.

new ac.buttons.ProgressButton(
	{ isPrimary: true, enableProgress: true, animationSettings: { effect: "SlideLeft" } },
	"#btnProgressSlideLeft"
);
new ac.buttons.ProgressButton(
	{ cssClass: "a-warning", enableProgress: true, animationSettings: { effect: "SlideRight" } },
	"#btnProgressSlideRight"
);
new ac.buttons.ProgressButton(
	{ cssClass: "a-info", enableProgress: true, animationSettings: { effect: "SlideUp" } },
	"#btnProgressSlideUp"
);
new ac.buttons.ProgressButton(
	{ cssClass: "a-danger", enableProgress: true, animationSettings: { effect: "SlideDown" } },
	"#btnProgressSlideDown"
);

<button id="btnProgressSlideLeft">Slide Left</button>
<button id="btnProgressSlideRight">Slide Right</button>
<button id="btnProgressSlideUp">Slide Up</button>
<button id="btnProgressSlideDown">Slide LeftDown</button>

Progress Button State

new ac.buttons.ProgressButton({ content: "Disabled Button", disabled: true }, "#btnDisabledButton");

<button id="btnDisabledButton">Disabled Button</button>

Progress Button with Pause/Resume

Create a progress button with ability to pause progress and resume.

let btnDownload = new ac.buttons.ProgressButton({
	content: "Download",
	enableProgress: true,
	enablePause: true,
	duration: 6000,
	iconCss: "a-btn-sb-icon a-download",
	spinSettings: { showSpinner: false },
	end: () => {
		btnDownload.content = "Download";
		btnDownload.iconCss = "a-btn-sb-icon a-download";
		btnDownload.dataBind();
	}
});

btnDownload.appendTo("#btnDownloadWithPause");
btnDownload.element.addEventListener("click", clickHandler);

function clickHandler() {
	if (btnDownload.content === "Download") {
		btnDownload.content = "Pause";
		btnDownload.iconCss = "a-btn-sb-icon a-pause";
		btnDownload.dataBind();
	}
	else if (btnDownload.content === "Pause") {
		btnDownload.content = "Resume";
		btnDownload.iconCss = "a-btn-sb-icon a-play";
		btnDownload.dataBind();
		btnDownload.stop();
	}
	else if (btnDownload.content === "Resume") {
		btnDownload.content = "Pause";
		btnDownload.iconCss = "a-btn-sb-icon a-pause";
		btnDownload.dataBind();
		btnDownload.start();
	}
}

<button id="btnDownloadWithPause">Download</button>

Formatting the progress position

Displays a progress button with the progress bar on the top of the button with no spinner.

new ac.buttons.ProgressButton(
	{ enableProgress: true, duration: 5000, cssClass: "a-progress-top", spinSettings: { showSpinner: false } },
	"#btnDownloadFormat"
);

<button id="btnDownloadFormat">Download</button>