Атрибут data-* тега <progress>

Описание

Атрибуты data-* для тега <progress> позволяют хранить дополнительную пользовательскую информацию, связанную с элементом прогресс-бара. Эти атрибуты не влияют на отображение, но могут использоваться JavaScript для расширенной функциональности.

Пример использования:
<progress value="42" max="100" data-process-id="upload-123" data-file-type="image" data-upload-source="mobile-app"> 42% </progress>

Типичные сценарии применения:

Атрибут Назначение Пример
data-process-id Идентификатор процесса data-process-id="file-upload-5"
data-type Тип операции data-type="file-upload"
data-callback Функция обратного вызова data-callback="onUploadComplete"
data-format Формат отображения data-format="percent"

Особенности работы:

  • Имена атрибутов должны быть в kebab-case (дефисы между словами)
  • Значения всегда строковые (для чисел требуется преобразование)
  • Доступ через свойство dataset в JavaScript
  • Не влияют на производительность при разумном использовании

Рекомендации:

  • Используйте для хранения мета-информации о процессе
  • Избегайте хранения больших объемов данных
  • Для сложных структур используйте JSON в одном атрибуте
  • Соблюдайте единый стиль именования в проекте

Пример с JSON данными:

<progress id="multiProgress" value="0" data-process-meta='{"id":"proc-123","type":"import","steps":5}'> Initializing... </progress> <script> const meta = JSON.parse(document.getElementById('multiProgress').dataset.processMeta); console.log(meta.type); // "import" </script>

Примечание: Хотя data-атрибуты предоставляют гибкий способ хранения информации, для сложных интерактивных прогресс-баров с множеством состояний рассмотрите использование JavaScript-классов или специализированных библиотек управления состоянием.