Реализация компонента “Прогресс”#

ВидЭлемента: КомпонентИнтерфейса
Ид: 01603afa-4dad-46f7-9fb5-7e4afc8a17eb
Имя: ПрогрессБар
ОбластьВидимости: Глобально
Наследует:
  Тип: ПроизвольныйКомпонент
  Содержимое:
      Тип: КонтейнерHtml
      Имя: Хтмл
      БезопасныйРежим: Ложь
      Высота: 30
      ПослеЗагрузкиСодержимого: ХтмлПослеЗагрузкиСодержимого
      РастягиватьПоВертикали: Ложь
      Содержимое: "<div id=\"progressBar\" style=\"width: 100%; background-color: #e3e3e3; border-radius: 8px; overflow: hidden; position: relative; height: 30px;\">\n    <div id=\"progressFill\" style=\"height: 100%; background-color: #4caf50; width: 0; transition: width 0.4s;\"></div>\n    <div id=\"progressDashedLine\" style=\"position: absolute; top: 0; bottom: 0; width: 4px; background-color: transparent; border-left: 4px dashed black; display: none;\"></div>\n    <div id=\"progressText\" style=\"position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-weight: bold; color: #000;\">\n        Загрузка...\n    </div>\n</div>\n\n<script>\n    function updateProgressBar(percentage, label, fillColor = \'#4caf50\', dashedLineAt = null, dashedLineColor = \'red\') {\n        const progressFill = document.getElementById(\'progressFill\');\n        const progressText = document.getElementById(\'progressText\');\n        const progressDashedLine = document.getElementById(\'progressDashedLine\');\n        \n        // Устанавливаем ширину заполнения и цвет\n        progressFill.style.width = percentage + \'%\';\n        progressFill.style.backgroundColor = fillColor;\n        \n        // Обновляем текст\n        progressText.textContent = label;\n\n        // Логика для пунктирной черты\n        if (dashedLineAt !== null && dashedLineAt >= 0 && dashedLineAt <= 100) {\n            progressDashedLine.style.left = dashedLineAt + \'%\';\n            progressDashedLine.style.borderLeftColor = dashedLineColor;\n            progressDashedLine.style.display = \'block\';\n        } else {\n            progressDashedLine.style.display = \'none\';\n        }\n    }\n</script>"
      ШиринаВКолонках: =ШиринаВКолонках
Свойства:
  -
      Имя: Значение
      Тип: Число
  -
      Имя: Максимум
      Тип: Число
  -
      Имя: Подпись
      Тип: Строка
  -
      Имя: ЗначениеМетки
      Тип: Число
  -
      Имя: ЦветЗаполнения
      Тип: Цвет?
  -
      Имя: ЦветМетки
      Тип: Цвет?
  -
      Имя: СодержимоеЗагружено
      Тип: Булево

ВидЭлемента: КомпонентИнтерфейса
Ид: b5770dc5-d736-44a1-9f73-aae8ac8b579f
Имя: ПрогрессБар
ОбластьВидимости: Глобально
Наследует:
    Тип: ПроизвольныйКомпонент
    Содержимое:
        Тип: Группа
        ШиринаВКолонках: =ШиринаВКолонках
        ИнтервалМеждуЭлементамиПоВертикали: Отсутствует
        Содержимое:
            -
                Тип: Надпись
                Имя: Подпись
                Значение: =Подпись
                ВыравниваниеВГруппеПоГоризонтали: Центр
                ШиринаВКолонках: =ШиринаВКолонках
            -
                Тип: ПроизвольнаяКарточка
                Имя: ПроизвольнаяКарточка
                ОтступПоВертикали: Отсутствует
                ОтступПоГоризонтали: Отсутствует
                РастягиватьПоГоризонтали: Истина
                ШиринаВКолонках: =ШиринаВКолонках
Свойства:
    -
        Имя: Подпись
        Тип: Строка
        ЗначениеПоУмолчанию: ="%{(Значение * 100 / Максимум).Округлить()}%"
    -
        Имя: Значение
        Тип: Число
    -
        Имя: Максимум
        Тип: Число
        ЗначениеПоУмолчанию: 100