Макет индикатора выполнения с использованием CSS и HTML

Question

Макет индикатора выполнения с использованием CSS и HTML

Очень полезно иметь, только имеют один класс на файл, но если Вы делаете свое здание через bulkbuild файлы, которые включают все отдельные файлы C++, это делает для более быстрых компиляций, так как время запуска является относительно большим для многих компиляторов.

23

html css progress-bar

задан Hristo 3 May 2011 в 06:28

2 ответа

Другие вопросы по тегам:

html css progress-bar

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

score 1 · Answer 1

Просто измените функцию onclick следующим образом, и вы получите анимированную версию принятого решения.

$('.changeprogress').click(function() {
  var width = 1;
  var percent = $(this).text().replace('%','') ;
  var id = setInterval(frame, 25);

  function frame() {
    if (width >= percent) {
      clearInterval(id);
    } else {
      width++;
      $('.bar').css('width', width + '%');
      $('.percent').text(width + '%');
    }
  }

});

http://jsfiddle.net/Zfzva/418/ можно увидеть это здесь.

благодаря

https://stackoverflow.com/a/5865894/2815227

https://www.w3schools.com/howto /tryit.asp?filename=tryhow_js_progressbar_3

score 0 · Answer 2

Я сделал половину работы для тебя.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
  <style type="text/css">
 #container { width:350px; }
 #main_bar {
    width:374px;
    height:35px;
    border:1px solid #111;
 }
 #inner_bar {
    float;left;
    width:150px; 
    background:#00ff00;
    margin:-20px 0 0 5px;
}
p {
    margin-top:-33px;
    text-align:center; }

</style>

    <title>The document title</title>
  </head>
  <body>
    <div id="container">
    <div id="main_bar">
    </div><!--#main_bar-->
    <div id="inner_bar">
    <p>hello</p>
    </div><!--#inner_bar-->
    <p>30%</p>
</div>
  </body>
</html>

Вы можете связываться с шириной, полями, отступами! Я ленился и не хотел заканчивать это. лол