Можно ли отображать неопределенный индикатор выполнения с помощью Twitter Bootstrap? [css, twitter-bootstrap, twitter-bootstrap-3, css-selectors, twitter-bootstrap-2]

arrow_upward
34
arrow_downward

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="progress progress-striped active">
  <div class="bar" style="width: 100%;"></div>
</div>

В бутстрапе 3:

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="progress progress-striped active">
  <div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
  </div>
</div>

В bootstrap 4:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<div class="progress">
  <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div>
</div>

Cody 12.11.2013

comment

Хотя это старый ответ, это лучший результат при поиске в Google, и это не отвечает на вопрос. В ответе отображается обычный индикатор выполнения, а в вопросе задается неопределенный индикатор выполнения. Неопределенные индикаторы выполнения не имеют известного прогресса для отображения: en.wikipedia.org/wiki/Progress_bar - Will Eddins; 12.03.2014

comment

Вы не пробовали код, который я предоставил? jsfiddle.net/CodyRank/pJ476 Это практически хрестоматийный пример неопределенного индикатора выполнения. См. также: goo.gl/iZRSzZ - Cody; 12.03.2014

comment

Я возьму обратно отрицательный голос - я думаю, пока он не сдвинется со 100%, он выглядит достаточно близко. Я ожидал чего-то большего, похожего на движущуюся полосу, которая не была просто анимированной на 100%, но похоже, что неопределенный Mac — это именно то, что нужно. Windows, как правило, является движущейся частью. Прости, что сомневался в тебе! - Will Eddins; 12.03.2014

comment

Ни один из них не работал для меня. Первый фрагмент дал мне пустой индикатор выполнения, второй дал мне полный ... никоим образом не анимирует - Ortund; 17.05.2018

comment

Не совсем ... новый вопрос был бы более уместным, но в конце концов я заставил его работать, так что без стресса - Ortund; 23.05.2018

comment

Я добавил код, как это сделать в bootstrap 4, так как этот ответ довольно старый. - Cody; 23.05.2018

arrow_upward
29
arrow_downward

Если вам нужно решение только для CSS, то вам сюда:

HTML:

<div class="progress" style="position: relative;">
    <div class="progress-bar progress-bar-striped indeterminate">
</div>

CSS:

.progress-bar.indeterminate {
  position: relative;
  animation: progress-indeterminate 3s linear infinite;
}

@keyframes progress-indeterminate {
   from { left: -25%; width: 25%; }
   to { left: 100%; width: 25%;}
}

Вот рабочая версия:

https://jsbin.com/dewikogujo/edit?html,css,output

Dave 06.07.2016

comment

На мой взгляд, это лучший ответ, поскольку он эмулирует традиционную полосу выделения Windows. С небольшим изменением HTML он работает и с Bootstrap 3:

<div class="progress progress-striped">                         <div class="progress-bar indeterminate" role="progressbar" style="width: 100%"></div>                     </div>

- romaricdrigon; 12.02.2019

comment

Это должен быть принятый ответ, поскольку он работает из коробки с индикатором выполнения Bootstrap. Кроме того, при желании анимацию можно заменить на более сложную. - beerwin; 16.07.2020

comment

Вы легенда! - Samuel Martins; 18.11.2020

arrow_upward
20
arrow_downward

Вот что я бы сделал, чтобы получить неопределенный индикатор выполнения:

Используйте полосатый анимированный индикатор выполнения
Установите его на 100%
Настройка скорости анимации
Добавьте текст типа «пожалуйста, подождите», чтобы сообщить пользователю, что что-то обрабатывается.
Добавьте эллипсы (...), используя свойство содержимого css.
Анимируйте эллипсы с помощью CSS в браузерах, которые это поддерживают

Демо:

.progress {
    margin: 15px;
}

.progress .progress-bar.active {
    font-weight: 700;
    animation: progress-bar-stripes .5s linear infinite;
}

.dotdotdot:after {
    font-weight: 300;
    content: '...';
    display: inline-block;
    width: 20px;
    text-align: left;
    animation: dotdotdot 1.5s linear infinite;
}

@keyframes dotdotdot {
  0%   { content: '...'; }
  25% { content: ''; }
  50% { content: '.'; }
  75% { content: '..'; }
}

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="progress">
  <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
    <span>Please wait<span class="dotdotdot"></span></span>
  </div>
</div>

(см. также эту скрипту)

John Slegers 14.03.2016

comment

этот ответ в сочетании с Bootbox.js (bootboxjs.com) - это то, что наконец сработало для меня. т/год! - snerd; 25.10.2016

comment

Я использовал этот ответ с blockUI, работал как шарм - Carlo G; 26.10.2017

comment

как вы визуализируете это на основе отправки некоторой обработки и удаляете ее после завершения обработки? - tale852150; 09.11.2017

comment

@ tale852150: Вам просто нужно установить ширину индикатора выполнения на нескольких этапах обработки. См. индикатор выполнения загрузки для базовой демонстрации. - John Slegers; 09.11.2017

comment

@JohnSlegers Спасибо за отзыв. Но это неопределенный индикатор выполнения. Мне нужно, чтобы он останавливался и отображал процесс завершен (или полностью исчезал), когда моя обработка завершена. Там нет никакого прогресса как такового. Или, может быть, я просто неправильно понимаю ваш отзыв. :-) - tale852150; 09.11.2017

comment

@ tale852150: Это тот же основной принцип: вы меняете свой CSS в зависимости от статуса вашего процесса. Если ваш процесс имеет только два статуса (например, в процессе и завершен), просто поместите индикатор выполнения и сообщение о завершении в одно и то же место в вашем HTML-коде. Затем скройте сообщение о завершении (display : none), пока ваш процесс находится в состоянии выполнения, и скройте индикатор выполнения, пока состояние завершено. Это также демонстрируется той же демонстрацией, на которую я ссылался в своем предыдущем комментарии! ➡ Подождите, пока индикатор выполнения не достигнет 100%, чтобы увидеть эффект! - John Slegers; 09.11.2017

arrow_upward
5
arrow_downward

Старая тема.. но я должен был сделать это сегодня. Вот что я сделал.

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

Фрагмент HTML

<div id="progressDiv" class="progress">
    <div class="progress-bar progress-bar-striped active" 
        role="progressbar" 
        aria-valuenow="100" 
        aria-valuemin="0" 
        aria-valuemax="100" 
        style="width: 100%">
    </div>
</div>

JavaScript

var progress = $("#progressDiv").html();

BootstrapDialog.show(
{
    title: "Please wait...",
    message: progress
});

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

Откроется модальное диалоговое окно с анимированной полосой.

James 05.10.2015

arrow_upward
1
arrow_downward

Меня не устраивал анимированный полосатый индикатор выполнения на 100%, поэтому я написал немного CSS. Просто добавьте класс jkoop-progress-bar-indeterminate в свой <div class="progress-bar .... Вот и все.

Протестировано с Bootstrap v4.5

.progress .jkoop-progress-bar-indeterminate.progress-bar-animated {
  animation: indeterminate 1s linear infinite alternate, progress-bar-stripes 1s linear infinite;
  width: 25% !important;
}

.progress .jkoop-progress-bar-indeterminate {
  animation: indeterminate 1s linear infinite alternate;
  width: 25% !important;
}

@keyframes indeterminate {
  0% {
    margin-left: 0;
  }
  100% {
    margin-left: 75%;
  }
}

<html>

<head>
  <title>Indeterminate Progress Bar</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js" integrity="sha384-LtrjvnR4Twt/qOuYxE721u19sVFLVSA4hf/rRt6PrZTmiPltdZcI7q7PXQBYTKyf" crossorigin="anonymous"></script>
</head>

<body style="margin: 20px;">
  <h1>Indeterminate Progress Bar</h1>

  <div class="progress">
    <div class="jkoop-progress-bar-indeterminate progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div>
  </div>

  <p style="color:#888;text-align:right">Bootstrap v4.5.2</p>
</body>

</html>

jkoop 17.11.2020

arrow_upward
0
arrow_downward

Это некрасиво, но выполняет свою работу:

HTML:

<div class="progress" style="position: relative;">
    <div class="progress-bar progress-bar-striped active" style="position: relative; left: -180px; width: 180px">
</div>

Javascript:

setInterval(function() {
    var progress_width = $('.progress').width();
    var $progress_bar = $('.progress-bar');

    $progress_bar.css('left', '+=3');

    var progress_bar_left = parseFloat($progress_bar.css('left')+'');
    if (progress_bar_left >= progress_width)
        $progress_bar.css('left', '-200px');
}, 20);

Не стесняйтесь немного оптимизировать свои селекторы jQuery ;-)

Вот рабочая версия:

https://jsbin.com/copejaludu/edit?html,js,output

Dave 02.07.2016

Можно ли отображать неопределенный индикатор выполнения с помощью Twitter Bootstrap?

Ответы (6)

Демо:

Похожие вопросы