Progress html: Тег | htmlbook.ru

Прогрессбар. Компоненты · Bootstrap. Версия v4.1.3

• Как это устроено
• Лейблы
• Высота
• Фон
• Множественные полосы
• Полосатые
• Анимированные полосы

Документация и примеры использования пользовательских индикаторов выполнения Bootstrap с поддержкой штабелированных баров, анимированных фонов и текстовых меток.

Как это устроено

Компоненты прогрессбаров созданы из двух элементов HTML, CSS для задания ширины и нескольких атрибутов. Мы не используем элемент HTML5 <progress>, что обеспечивает возможность вертикального расположения прогрессбаров, возможность их анимации и размещения текстовых лейблов над ними.

• Мы используем класс .progress как обертку для индикации максимального значения прогрессбара.
• Мы используем внутренний класс .progress-bar для индикации пройденного прогресса.
• Класс .progress-bar требует оформления себя как строчного элемента, обычного класса или CSS для задания своей ширины.
• Класс .progress-bar также требует атрибутся role и aria, чтобы стать открытыми к взаимодействию с вспомогательными технологиями.

Все это воплощено в примерах ниже.

<div>
  <div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div>
  <div role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div>
  <div role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div>
  <div role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div>
  <div role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Bootstrap имеет немало утилит для задания ширины. В зависимости от ваших нужд они могут помочь и с быстрой настройкой прогрессбара.

<div>
  <div role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Лейблы

Добавляйте лейблы (т.е. инфо типа цифр) в ваши прогрессбары, размещая текст внутри класса .progress-bar.

<div>
  <div role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>

Высота

В классе .progress задается лишь атрибут height, так что если вы измените это значение, внутренний класс .progress-bar автоматически изменит свой размер соответственно.

<div>
  <div role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div>
  <div role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Фон

Используйте обычные классы фона для изменения внешнего вида отдельных полос прогрессбара.

<div>
  <div role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div>
  <div role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div>
  <div role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div>
  <div role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Множественные полосы

Включайте в свой прогрессбар таковые, если необходимо.

<div>
  <div role="progressbar" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
  <div role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
  <div role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Полосатые

Добавьте класс . progress-bar-striped к любому элементу класса .progress-bar, чтобы добавить градиентные полосы на CSS к фоновому цвету прогрессбара.

<div>
  <div role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div>
  <div role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div>
  <div role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div>
  <div role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div>
  <div role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Анимированные полосы

Добавьте класс .progress-bar-animated к элементу класса .

<div>
  <div role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Please enable JavaScript to view the comments powered by Disqus.

Progress Bars | Electron

Обзор​

Progress bar позволяет окну предоставлять информацию о прогрессе пользователю без необходимости переключения на само окно.

В Windows вы можете использовать кнопку панели задач для отображения progress bar.

На macOS progress bar будет отображаться как часть dock icon.

На Linux графический интерфейс Unity также имеет аналогичную функцию, которая вам указать планку прогресса в пусковой установке.

ПРИМЕЧАНИЕ: на Windows, каждое окно может иметь свой собственный планку прогресса, в то время как на macOS и Linux (Unity) может быть только одна планка прогресса для приложения.

Все три случая охватываются одним и тем же API — setProgressBar() методом, доступным на экземпляре BrowserWindow. Чтобы указать свой прогресс, позвоните в этот метод с номером между 0 и 1. Например, если у вас есть давняя задача, которая в настоящее время 63% к завершению, вы назвали бы ее как setProgressBar(0.63).

Setting the parameter to negative values (e.g. -1) will remove the progress bar. Setting it to a value greater than 1 will indicate an indeterminate progress bar in Windows or clamp to 100% in other operating systems. An indeterminate progress bar remains active but does not show an actual percentage, and is used for situations when you do not know how long an operation will take to complete.

Просмотрите документацию по API для большего количества опций и режимов.

Пример​

In this example, we add a progress bar to the main window that increments over time using Node. js timers.

• main.js
• index.html

const { app, BrowserWindow } = require('electron')
let progressInterval
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600
})
win.loadFile('index.html')
const INCREMENT = 0.03
const INTERVAL_DELAY = 100 // ms
let c = 0
progressInterval = setInterval(() => {
// update progress bar to next value
// values between 0 and 1 will show progress, >1 will show indeterminate or stick at 100%
win.setProgressBar(c)
// increment or reset progress bar
if (c < 2) {
c += INCREMENT
} else {
c = (-INCREMENT * 5) // reset to a bit less than 0 to show reset state
}
}, INTERVAL_DELAY)
}
app.whenReady().then(createWindow)
// before the app is terminated, clear both timers
app. on('before-quit', () => {
clearInterval(progressInterval)
})
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})

After launching the Electron application, the dock (macOS) or taskbar (Windows, Unity) should show a progress bar that starts at zero and progresses through 100% to completion. It should then show indeterminate (Windows) or pin to 100% (other operating systems) briefly and then loop.

Для macOS планка прогресса также будет указана для вашей приложения использовании Mission Control:

Индикаторы выполнения Bootstrap

❮ Предыдущая Далее ❯

Основной индикатор выполнения

Индикатор выполнения может использоваться для отображения пользователю, как далеко он продвинулся в процесс.

Bootstrap предоставляет несколько типов индикаторов выполнения.

Индикатор выполнения по умолчанию в Bootstrap выглядит следующим образом:

70% завершения

Чтобы создать индикатор выполнения по умолчанию, добавьте класс .progress к элементу

Попробуйте сами »

Цветные индикаторы выполнения

Контекстные классы используются для предоставления «значения через цвета».

Контекстные классы, которые можно использовать с индикаторами выполнения:

• .progress-bar-success
• .прогресс-бар-информация
• .прогресс-бар-предупреждение
• .прогресс-бар-опасность

Завершено на 40 % (успешно)

Завершено на 50 % (информация)

Завершено на 60 % (предупреждение)

Завершено на 70 % (опасно)

В следующем примере показано, как создать индикаторы выполнения с различными контекстные классы:

Пример

Попробуйте сами »

Полосатые индикаторы выполнения

Индикаторы выполнения также могут быть полосатыми:

40% завершено (успех)

50% завершено (информация)

Завершено на 60% (предупреждение)

Завершено на 70% (опасно)

Добавьте класс . progress-bar-striped для добавления полос на индикаторы выполнения:

Пример

Попробуйте сами »

Анимированный индикатор выполнения

Добавьте класс .active для анимации индикатора выполнения:

Пример

Попробуйте сами »

Индикаторы выполнения с накоплением

Индикаторы выполнения также могут быть сложены:

Свободное пространство

Опасность

Создайте составной индикатор выполнения, поместив несколько индикаторов в один и тот же

<дел>
  <дел
    роль = "прогрессбар"
   >