-2

Нужно сделать индикатор загрузки на js, с условием что js меняет только одно свойство css и цифру загрузки.
Чтобы было удобнее, прикрепил картинку.

img

2
  • 4
    @bifot, Согласно правилам форума, вопросы не должны сводиться к решению либо завершению учебных заданий за учащихся. Пожалуйста, уточните, что вы сделали сами и что не получилось.
    – fori1ton
    15 авг 2013 в 12:11
  • у меня не получается сделать анимацию по заходу страницы. Все остальное сделать я могу.
    – bifot
    15 авг 2013 в 12:46

2 ответа 2

2

вот
Нажать нужно на "go".
Использовался jquery animate и его callback step.

4
  • Мне нужна полоска изначала, даже когда не началась загрузка. И надпись по центру фона (не загрузки). И желательно, чтобы все началась автоматически.
    – bifot
    15 авг 2013 в 12:45
  • Хотя, лучше сделать что-то типо кнопки "go", как у вас. Заранее спасибо. Надо точно по картинке, которую я прикрепил. Цвета можно любые, сам поправлю.
    – bifot
    15 авг 2013 в 12:51
  • @bifot а ещё чтобы кофе варило и готовило пиццу... )))
    – IVsevolod
    15 авг 2013 в 12:55
  • jsfiddle.net/anGGP/3 ну вот типо того.
    – GreenBanan
    15 авг 2013 в 12:59
2

Вот как вариант накатал специально для вас:
Индикатор загрузки
Если есть предложения пишите))

$(function() {
  $(function() {
    $(".progress").animate({
      width: "100%"
    }, {
      duration: 4000,
      step: function(now) {
        $(".text").text('Loading:' + Math.round(now) + '%');
      }
    });
    return false;
  });
});
.wrapper {
  width: 100%;
  background: darkblue;
  height: 5px;
  position: absolute;
}
.progress {
  background-color: white;
  height: 5px;
}
body {
  background: orange;
}
.text {
  position: fixed;
  top: 200;
  left: 100;
  color: white;
  font-size: 400%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <div class="wrapper">
    <div class="progress" style="width: 0%;"></div>
  </div>
  <div class="text"></div>
</body>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.