Как в javascript добавить спиннер на время выполнения скрипта?

Question

[junior_www]

Добрый день! Есть скрипт, который выполняется несколько секунд. (сортировка большой таблицы). Подскажите, кто знает, как добавить спинер, пока выполняется скрипт.

function sortTable(n) {
				var table;
				table = document.getElementById("table");
				var rows, i, x, y, count = 0;
				var switching = true;
				var xDateStr, yDateStr, xDate, yDate = 0;
				// Order is set as ascending
				var direction = "descending";

				// Run loop until no switching is needed
				while (switching) {
					switching = false;
					var rows = table.rows;

					//Loop to go through all rows
					for (i = 1; i < (rows.length - 1); i++) {
						var Switch = false;

						// Fetch 2 elements that need to be compared
						var	xDateStr = rows[i].getElementsByTagName("TD")[n];
						var	yDateStr = rows[i + 1].getElementsByTagName("TD")[n];
					//	console.log(xDateStr,yDateStr);
					
					//	var myDate = "26.02.2012";
						var xDate = xDateStr.innerHTML.split(".");
						var yDate = yDateStr.innerHTML.split(".");
						x = new Date( xDate[2], xDate[1] - 1, xDate[0]);
						y = new Date( yDate[2], yDate[1] - 1, yDate[0]);
						
		
						console.log(x,y);

						
						// Check the direction of order
						if (direction == "ascending") {

							// Check if 2 rows need to be switched
						
							if (x > y)
								{
								// If yes, mark Switch as needed and break loop
								Switch = true;
								break;
							}
						} else if (direction == "descending") {

							// Check direction
						
							if (x < y)
								{
								// If yes, mark Switch as needed and break loop
								Switch = true;
								break;
							}
						}
					}
					if (Switch) {
						// Function to switch rows and mark switch as completed
						rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
						switching = true;

						// Increase count for each switch
						count++;
					} else {
						// Run while loop again for descending order
						if (count == 0 && direction == "ascending") {
							direction = "descending";
							switching = true;
						}
					}
				}
			}

Comments

[Сергей Соколов]

в самом начале функции показать спиннер, в самом конце — убрать.

[junior_www]

Сергей Соколов, большое спасибо

Answer 1

[V0VA]

Добавляете перед таблицей <div class="overlayTable"></div>
Вначале выполнения скрипта пишете

// JavaScript program to illustrate
			// Table sort for both columns and both directions.
			function sortTable(n) {
				var table;
				table = document.getElementById("table");
				var overlayTable = document.querySelector(".overlayTable");
//добавляем эту строку
				overlayTable.classList.add("working");
//...........

В конце, перед закрывающей фигурной скобкой

//.......
	//удаляем класс	
	overlayTable.classList.remove("working");

			}

Ну а сам добавленный див оформляете как нравится для

.overlayTable {
//
}
.overlayTable.working {
//
}

Comments

[junior_www]

V0VA, благодарю