ProgressBar на CSS И HTML

Новейшие дополнения к спецификациям HTML и CSS позволяют веб-разработчикам создавать красивые и удобные компоненты. Среди этих компонентов индикаторы выполнения / загрузки (ProgressBar). Использование этих компонентов улучшит внешний вид сайта.

В этом туториале, посвященном интерфейсу, я покажу вам как делать progressbar на css и hrml.

Приготовления

Давайте начнем с организации файлов для проекта. Нам понадобится 3 файла:

  • progress.html, который будет содержать нашу разметку.
  • ui.css, который будет содержать наши стили CSS.
  • progress.js, который будет содержать некоторые дополнительные анимации jQuery.

Первый шаг – создать новый каталог на вашем веб-сервере или жестком диске и создать 3 файла, которые вместе станут основой нашей панели HTML / CSS.

HTML-разметка

Итак. Откройте файл progress.html и вставьте в него следующую разметку HTML:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Pure CSS Progress Bar</title>

	<link rel="stylesheet" href="stylesheets/ui.css">
	<link rel="stylesheet" href="stylesheets/ui.progress-bar.css">
</head>
<body>
	<div id="container">
		<div id="progress_bar" class="ui-progress-bar ui-container">
        	<div class="ui-progress" style="width: 79%;">
				<span class="ui-label" style="display:none;">Processing <b class="value">79%</b></span>
      		</div><!-- .ui-progress -->
    	</div><!-- #progress_bar -->  

		<div class="content" id="main_content" style="display: none;">
	    	<p>Hello, World!</p>
	  	</div><!-- #main_content -->
	</div><!-- #container -->
</body>
</html>

Позвольте мне немного пояснить код: в первой строке я объявил HTML5-тип документа. Затем строки 12-16 содержат разметку для самого progressbar. Если вы сохраните файл и просмотрите его в своем браузере прямо сейчас, вы увидите, что ничего не появляется. Не волнуйтесь, мы собираемся применить магию чистого CSS через минуту.

Погружение в CSS

Как только вы закончите работу с HTML-частью, откройте файл ui.css и вставьте в него следующий код CSS.

Там нет ничего необычного, только некоторые основные стили (которые я упростил из исходного источника) для макета.

body {
  background:#eee;
  padding: 30px;
  font-size: 62.5%;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  position: relative;
  margin: 0;
}

#container {
  margin: 0 auto;
  width: 460px;
  padding: 2em;
  background: #DCDDDF;

}

.ui-progress-bar {
  margin-top: 3em;
  margin-bottom: 3em;
} 

.ui-progress span.ui-label {
  font-size: 1.2em;
  position: absolute;
  right: 0;
  line-height: 33px;
  padding-right: 12px;
  color: rgba(0,0,0,0.6);
  text-shadow: rgba(255,255,255, 0.45) 0 1px 0px;
  white-space: nowrap;
}

Наконец, можем заняться более серьезными вещами. Приведенный ниже код оживит ваш progressbar HTML / CSS. Я объясню, как это работает через минуту. А пока скопируйте его и вставьте в свой файл ui.css.

@-webkit-keyframes animate-stripes {
  from {
    background-position: 0 0;
  }

  to {
   background-position: 44px 0;
  }
}      

.ui-progress-bar {
  position: relative;
  height: 35px;
  padding-right: 2px;
  background-color: #abb2bc;
  border-radius: 35px;
  -moz-border-radius: 35px;
  -webkit-border-radius: 35px;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #b6bcc6), color-stop(1, #9da5b0));
  background: -moz-linear-gradient(#9da5b0 0%, #b6bcc6 100%);
  -webkit-box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.5), 0px 1px 0px 0px #FFF;
  -moz-box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.5), 0px 1px 0px 0px #FFF;
  box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.5), 0px 1px 0px 0px #FFF;
}        

.ui-progress {
  position: relative;
  display: block;
  overflow: hidden;
  height: 33px;
  -moz-border-radius: 35px;
  -webkit-border-radius: 35px;
  border-radius: 35px;
  -webkit-background-size: 44px 44px;
  background-color: #74d04c;
  background: -webkit-gradient(linear, 0 0, 44 44,
    color-stop(0.00, rgba(255,255,255,0.17)),
    color-stop(0.25, rgba(255,255,255,0.17)),
    color-stop(0.26, rgba(255,255,255,0)),
    color-stop(0.50, rgba(255,255,255,0)),
    color-stop(0.51, rgba(255,255,255,0.17)),
    color-stop(0.75, rgba(255,255,255,0.17)),
    color-stop(0.76, rgba(255,255,255,0)),
    color-stop(1.00, rgba(255,255,255,0))
  ), -webkit-gradient(linear, left bottom, left top, color-stop(0, #74d04c), color-stop(1, #9bdd62));
  background: -moz-repeating-linear-gradient(top left -30deg,
    rgba(255,255,255,0.17),
    rgba(255,255,255,0.17) 15px,
    rgba(255,255,255,0) 15px,
    rgba(255,255,255,0) 30px
  ), -moz-linear-gradient(#9bdd62 0%, #74d04c 100%);
  -webkit-box-shadow: inset 0px 1px 0px 0px #dbf383, inset 0px -1px 1px #58c43a;
  -moz-box-shadow: inset 0px 1px 0px 0px #dbf383, inset 0px -1px 1px #58c43a;
  box-shadow: inset 0px 1px 0px 0px #dbf383, inset 0px -1px 1px #58c43a;
  border: 1px solid #4c8932;
  -webkit-animation: animate-stripes 2s linear infinite;
}

Сохраните файл ui.css и посмотрите на файл progress.html в своем веб-браузере. Если вы тщательно следовали предыдущим шагам этого урока, вы должны увидеть великолепный progressbar, выполненный без использования какого-либо изображения.

Итак, как этот код работает во всех браузерах? Вот объяснение:

Во-первых, у нас есть два класса CSS: .ui-progress-bar и .ui-progress. Первый – это контейнер, а второй – сам элемент прогресса.

  • Строки с 1 по 9: Эти строки определяют анимацию, специфичную для веб-набора, которая позволяет нам перемещать элемент из одной точки в другую. Для получения дополнительной информации об анимации HTML и CSS см. http://webkit.org/blog/324/css-animation-2/.
  • Строка 16: CSS3-свойство border-radius позволяет вам определять радиус и получать закругленные углы.
  • Строка 17: специфическое свойство Mozilla для border-radius.
  • Строка 18: специфическое свойство Webkit для border-radius.
  • Строка 19: свойство -webkit-gradient позволяет добавлять градиент к элементу. Работает только на Webkit, другие браузеры игнорируют это свойство.
  • Строка 20: специфичное для Mozilla свойство, аналогичное -webkit- gradient с другим синтаксисом.
  • Строки с 21 по 23: box-shadow (и его специфичные для браузера альтернативы) позволяет добавлять тень к элементу.
  • Строка 34: специфическое свойство Webkit, основанное на стандартном свойстве background-size, которое позволяет указать размер фонового изображения.
  • Строка 56: запускает анимацию веб-набора, определенную в строке 1.

Последние штрихи: использование jQuery для анимации индикаторов прогресса

Чистые CSS-индикаторы – это очень крутая вещь, но так как индикаторы выполнения предназначены для отображения прогресса для пользователей, нам теперь нужно его анимировать. Для этого мы будем использовать трио HTML CSS JavaScript. Точнее, мы будем использовать jQuery.

Откройте файл progress.html и вставьте две строки ниже чуть выше закрывающего тега .

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="progress.js" type="text/javascript" charset="utf-8"></script>

Этот код загрузит jQuery из Google, а также ваш файл progress.js, который будет содержать необходимый код для анимации progressbar. Конечно, вы можете использовать собственную версию jQuery вместо хост-версии Google, если хотите.

Теперь вставьте приведенный ниже код в ваш файл progress.js:

(function( $ ){
  $.fn.animateProgress = function(progress, callback) {
    return this.each(function() {
      $(this).animate({
        width: progress+'%'
      }, {
        duration: 2000, 

        easing: 'swing',

        step: function( progress ){
          var labelEl = $('.ui-label', this),
              valueEl = $('.value', labelEl);

          if (Math.ceil(progress) < 20 && $('.ui-label', this).is(":visible")) {
            labelEl.hide();
          }else{
            if (labelEl.is(":hidden")) {
              labelEl.fadeIn();
            };
          }

          if (Math.ceil(progress) == 100) {
            labelEl.text('Done');
            setTimeout(function() {
              labelEl.fadeOut();
            }, 1000);
          }else{
            valueEl.text(Math.ceil(progress) + '%');
          }
        },
        complete: function(scope, i, elem) {
          if (callback) {
            callback.call(this, i, elem );
          };
        }
      });
    });
  };
})( jQuery );

$(function() {
  $('#progress_bar .ui-progress .ui-label').hide();
  $('#progress_bar .ui-progress').css('width', '7%');

  $('#progress_bar .ui-progress').animateProgress(43, function() {
    $(this).animateProgress(79, function() {
      setTimeout(function() {
        $('#progress_bar .ui-progress').animateProgress(100, function() {
          $('#main_content').slideDown();
        });
      }, 2000);
    });
  });

});

После сохранения файла просмотрите файл progress.html через веб-браузер: как видите, индикатор выполнения теперь анимирован благодаря jQuery, а также HTML и CSS.

Этот код JavaScript переводит индикатор выполнения с 0 на 100. После достижения 100 отображается пользовательское сообщение. В этом уроке отображается индикатор Hello World. Это сообщение можно изменить, отредактировав файл progress.html.

Поздравляем с завершением этого урока! Теперь вы знаете, как создавать progressbar HTML / CSS.