При создании веб-приложений с использованием архитектурного шаблона Модель-Представление-Контроллер (MVC) обычно включается индикатор загрузки, обеспечивающий визуальную обратную связь пользователю во время загрузки страницы. В этой статье мы рассмотрим семь различных методов реализации счетчика загрузки MVC при загрузке страницы, а также приведем примеры кода.

1. CSS-анимация.
   Один простой способ создать индикатор загрузки — использовать CSS-анимацию. Вы можете определить ключевые кадры для анимации счетчика и применить их к элементу с помощью CSS. Вот пример:

<div class="spinner"></div>
<style>
.spinner {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  animation: spin 2s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>

2. JavaScript setTimeout():
   Другой подход — использовать функцию JavaScript setTimeout()для задержки отображения контента до тех пор, пока не пройдет определенный период, в течение которого отображается индикатор загрузки. Вот пример:

<div id="spinner"></div>
<div id="content" >
  <!-- Your page content here -->
</div>
<script>
setTimeout(function() {
  document.getElementById("spinner").style.display = "none";
  document.getElementById("content").style.display = "block";
}, 2000); // 2000 milliseconds (2 seconds)
</script>

3. Обещания с async/await.
   Использование обещаний JavaScript с синтаксисом async/await обеспечивает больший контроль и гибкость. Вы можете обернуть свои асинхронные операции в обещание и дождаться его разрешения, прежде чем раскрывать содержимое. Вот пример:

<div id="spinner"></div>
<div id="content" >
  <!-- Your page content here -->
</div>
<script>
function simulateAsyncOperation() {
  return new Promise(resolve => {
    setTimeout(resolve, 2000); // Simulating a 2-second delay
  });
}
async function showContent() {
  await simulateAsyncOperation();
  document.getElementById("spinner").style.display = "none";
  document.getElementById("content").style.display = "block";
}
showContent();
</script>

4. jQuery ajaxStart()и ajaxStop():
   Если вы используете jQuery в своем приложении MVC, вы можете использовать его встроенные обработчики событий, ajaxStart()и ajaxStop(), чтобы показать и скрыть счетчик во время запросов AJAX. Вот пример:

<div id="spinner"></div>
<div id="content">
  <!-- Your page content here -->
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ajaxStart(function() {
  $("#spinner").show();
});
$(document).ajaxStop(function() {
  $("#spinner").hide();
});
</script>

5. Fetch API с обещаниями.
   Если вы используете Fetch API для запросов AJAX, вы можете объединить его с обещаниями для отображения счетчика загрузки во время вызова API. Вот пример:

<div id="spinner"></div>
<div id="content">
  <!-- Your page content here -->
</div>
<script>
function fetchData() {
  return fetch("your-api-url")
    .then(response => response.json())
    .then(data => {
      // Process the data
    });
}
function showSpinner() {
  document.getElementById("spinner").style.display = "block";
}
function hideSpinner() {
  document.getElementById("spinner").style.display = "none";
}
showSpinner();
fetchData()
  .then(() => {
    hideSpinner();
  });
</script>

6. Сторонние библиотеки.
   Существует несколько сторонних библиотек, которые упрощают процесс реализации счетчиков загрузки. Некоторые популярные из них включают Spin.js, Ladda и Loading.io. Вы можете выбрать библиотеку, которая соответствует вашим потребностям, и интегрировать ее в свое приложение MVC.

7. CSS-фреймворки.
   CSS-фреймворки, такие как Bootstrap и Foundation, предоставляют встроенные компоненты счетчика загрузки, которые вы можете использовать в своем приложении MVC. Эти платформы часто поставляются с предопределенными стилями и анимацией, что позволяет легко добавить на страницу индикатор загрузки.

В этой статье мы рассмотрели семь различных методов реализации счетчика загрузки MVC при загрузке страницы. Независимо от того, предпочитаете ли вы использовать CSS-анимацию, тайм-ауты JavaScript, обещания, jQuery, Fetch API, сторонние библиотеки или платформы CSS, существуют различные варианты улучшения взаимодействия с пользователем во время загрузки страницы. Выберите метод, который лучше всего соответствует требованиям вашего проекта, и начните внедрять счетчики загрузки, которые привлекают и информируют ваших пользователей.