Вопросы Теги

Синтаксическая анимация в режиме загрузки нагрузки в бутстрапе 4 [дубликат]

Если вы не знаете, насколько глубоко ваш ярлык находится в иерархии, в SwingUtilities есть некоторые удобные функции: SwingUtilities.getAncestorOfClass (класс, компонент)

Альтернативой проверке имени родительского контейнера в ваших ярлыках может быть просто переслать событие в родительский контейнер и позволить родителям выполнить эту работу. В зависимости от того, что вы пытаетесь достичь, было бы полезно отделить этикетки от родителей. События пересылки могут быть выполнены с использованием Component. [D1] processEvent (AWTEvent) .

38
задан Andres Ilich 4 April 2012 в 12:00
поделиться

5 ответов

В то время как ответ Tats_innit имеет приятный штрих к нему, мне пришлось сделать это немного по-другому, так как у меня на странице более одного индикатора выполнения.

вот мое решение:

JSfiddle: http://jsfiddle.net/vacNJ/

HTML (пример): 

<div class="progress progress-success">
<div class="bar" style="float: left; width: 0%; " data-percentage="60"></div>
</div>

<div class="progress progress-success">
<div class="bar" style="float: left; width: 0%; " data-percentage="50"></div>
</div>

<div class="progress progress-success">
<div class="bar" style="float: left; width: 0%; " data-percentage="40"></div>
</div>

JavaScript: 

setTimeout(function(){

    $('.progress .bar').each(function() {
        var me = $(this);
        var perc = me.attr("data-percentage");

        var current_perc = 0;

        var progress = setInterval(function() {
            if (current_perc>=perc) {
                clearInterval(progress);
            } else {
                current_perc +=1;
                me.css('width', (current_perc)+'%');
            }

            me.text((current_perc)+'%');

        }, 50);

    });

},300);

@Tats_innit: Использование setInterval () для динамического повторения прогресса - это приятное решение, thx mate! ;)

EDIT:

Мой друг написал хороший плагин jquery для пользовательских твитовских бутстрапов. Вот демо: http://minddust.github.com/bootstrap-progressbar/

Вот репозиторий Github: https://github.com/minddust/ самозагрузки-прогрессбар [/ д2]

27
ответ дан Vicky Chijwani 16 August 2018 в 01:35
поделиться
  • 1
    он работает хорошо .. но иногда он показывает десятичное значение в progressbar и% ушел от progressbar .... – Jasper Manickaraj 24 April 2013 в 09:08
  • 2
    Привет. Может кто-нибудь сказать мне, как отредактировать этот скрипт, чтобы сделать это десять минут? Я играл вокруг, но я не могу, кажется, получить десятиминутное правило - любые идеи? Большое спасибо – henry 1 August 2014 в 23:35

Bootstrap использует переходы CSS3, поэтому индикаторы выполнения автоматически анимируются, когда вы устанавливаете ширину .bar trough javascript / jQuery.

http://jsfiddle.net/3j5Je/ ..видеть?

19
ответ дан ellabeauty 16 August 2018 в 01:35
поделиться

Вклад в ответ эллабеоти. вы также можете использовать это динамическое процентное значение 

$('.bar').css('width',  function(){ return ($(this).attr('data-percentage')+'%')});

И, возможно, добавить пользовательское ослабление к вашему css 

.bar {
 -webkit-transition: width 2.50s ease !important;
 -moz-transition: width 2.50s ease !important;
   -o-transition: width 2.50s ease !important;
      transition: width 2.50s ease !important;
 }
9
ответ дан kevin 16 August 2018 в 01:35
поделиться

Это кросс-браузерное решение только для CSS. Надеюсь, что это поможет!

DEMO 

.progress .progress-bar {
    -moz-animation-name: animateBar;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: ease-in;
    -moz-animation-duration: .4s;

    -webkit-animation-name: animateBar;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-duration: .4s;

    animation-name: animateBar;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: .4s;
}

@-moz-keyframes animateBar {
    0% {-moz-transform: translateX(-100%);}
    100% {-moz-transform: translateX(0);}
}
@-webkit-keyframes animateBar {
    0% {-webkit-transform: translateX(-100%);}
    100% {-webkit-transform: translateX(0);}
}
@keyframes animateBar {
    0% {transform: translateX(-100%);}
    100% {transform: translateX(0);}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  
  <h3>Progress bar animation on load</h3>
  
  <div class="progress">
    <div class="progress-bar progress-bar-success" style="width: 75%;"></div>
  </div>
</div>

2
ответ дан Nathalia Xavier 16 August 2018 в 01:35
поделиться

EDIT

  • Имя класса изменено с bar на progress-bar в v3.1.1

HTML 

<div class="container">
    <div class="progress progress-striped active">
        <div class="bar" style="width: 0%;"></div>
    </div>
</div>​

CSS 

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

.container {
    margin-top: 30px;
    width: 400px;
}​

jQuery, используемый в скрипте ниже и на document.ready 

$(document).ready(function(){

    var progress = setInterval(function() {
        var $bar = $('.bar');

        if ($bar.width()>=400) {
            clearInterval(progress);
            $('.progress').removeClass('active');
        } else {
            $bar.width($bar.width()+40);
        }
        $bar.text($bar.width()/4 + "%");
    }, 800);

});​

Демо

JSFiddle

Обновлен JSFiddle

72
ответ дан Tot Zam 16 August 2018 в 01:35
поделиться
Другие вопросы по тегам:

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