Красивый прогресс-бар — Реализация

Реализация стильного прогресс-бара в стиле 3Д — html\\cssКак реализовать:

1. Для начала html разметка:

		<section class="content">
			<!-- <h2>h2</h2> -->
			<article class="flexy-grid">
				<h3>Striped bars</h3>
				<input type="checkbox" id="bar-1">
				<div class="flexy-column">
					<div class="progress-factor flexy-item">
						<div class="progress-bar">
							<div class="bar has-rotation has-colors navy ruler" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" id="bar-0_0">
								<div class="tooltip white"></div>
								<div class="bar-face face-position roof percentage"></div>
								<div class="bar-face face-position back percentage"></div>
								<div class="bar-face face-position floor percentage volume-lights"></div>
								<div class="bar-face face-position left"></div>
								<div class="bar-face face-position right"></div>
								<div class="bar-face face-position front percentage volume-lights shine"></div>
							</div>
						</div>
					</div>
				</div>
				<div class="flexy-column">
					<div class="progress-factor flexy-item">
						<div class="progress-bar">
							<div class="bar has-rotation has-colors orange ruler-2" role="progressbar" aria-valuenow="64" aria-valuemin="0" aria-valuemax="100">
								<div class="tooltip white"></div>
								<div class="bar-face face-position roof percentage"></div>
								<div class="bar-face face-position back percentage"></div>
								<div class="bar-face face-position floor percentage volume-lights"></div>
								<div class="bar-face face-position left"></div>
								<div class="bar-face face-position right"></div>
								<div class="bar-face face-position front percentage volume-lights shine"></div>
							</div>
						</div>
					</div>
				</div>
				<div class="flexy-column">
					<div class="progress-factor flexy-item">
						<div class="progress-bar">
							<div class="bar has-rotation has-colors cyan ruler-3" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
								<div class="tooltip white"></div>
								<div class="bar-face face-position roof percentage"></div>
								<div class="bar-face face-position back percentage"></div>
								<div class="bar-face face-position floor percentage volume-lights"></div>
								<div class="bar-face face-position left"></div>
								<div class="bar-face face-position right"></div>
								<div class="bar-face face-position front percentage volume-lights shine"></div>
							</div>
						</div>
					</div>
				</div>
				<label class="value-label" for="bar-1">[ aria-valuenow = '90%' ]</label>
			</article>
			<article class="flexy-grid">
				<h3>Heat bars</h3>
				<input type="checkbox" id="bar-2">
				<div class="flexy-column">
					<div class="progress-factor flexy-item">
						<div class="progress-bar">
							<div class="bar has-rotation has-colors red heat-gradient" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">
								<div class="tooltip heat-gradient-tooltip"></div>
								<div class="bar-face face-position roof percentage"></div>
								<div class="bar-face face-position back percentage"></div>
								<div class="bar-face face-position floor percentage volume-lights"></div>
								<div class="bar-face face-position left"></div>
								<div class="bar-face face-position right"></div>
								<div class="bar-face face-position front percentage volume-lights shine"></div>
							</div>
						</div>
					</div>
				</div>
				<div class="flexy-column">
					<div class="progress-factor flexy-item">
						<div class="progress-bar">
							<div class="bar has-rotation has-colors red heat-gradient" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
								<div class="tooltip heat-gradient-tooltip"></div>
								<div class="bar-face face-position roof percentage"></div>
								<div class="bar-face face-position back percentage"></div>
								<div class="bar-face face-position floor percentage volume-lights"></div>
								<div class="bar-face face-position left"></div>
								<div class="bar-face face-position right"></div>
								<div class="bar-face face-position front percentage volume-lights shine"></div>
							</div>
						</div>
					</div>
				</div>
				<div class="flexy-column">
					<div class="progress-factor flexy-item">
						<div class="progress-bar">
							<div class="bar has-rotation has-colors red heat-gradient" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
								<div class="tooltip heat-gradient-tooltip"></div>
								<div class="bar-face face-position roof percentage"></div>
								<div class="bar-face face-position back percentage"></div>
								<div class="bar-face face-position floor percentage volume-lights"></div>
								<div class="bar-face face-position left"></div>
								<div class="bar-face face-position right"></div>
								<div class="bar-face face-position front percentage volume-lights shine"></div>
							</div>
						</div>
					</div>
				</div>
				<label class="value-label" for="bar-2">[ aria-valuenow = '90%' ]</label>
			</article>
			<article class="flexy-grid">
				<h3>Dotted bar</h3>
				<input type="checkbox" id="bar-0">
				<div class="flexy-column">
					<div class="progress-factor flexy-item">
						<div class="progress-bar">
							<div class="bar has-rotation has-colors dark dots-pattern" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
								<div class="tooltip"></div>
								<div class="bar-face face-position roof percentage"></div>
								<div class="bar-face face-position back percentage"></div>
								<div class="bar-face face-position floor percentage volume-lights"></div>
								<div class="bar-face face-position left"></div>
								<div class="bar-face face-position right"></div>
								<div class="bar-face face-position front percentage volume-lights shine"></div>
							</div>
						</div>
					</div>
				</div>
				<label class="value-label" for="bar-0">[ aria-valuenow = '90%' ]</label>
			</article>
			<article class="flexy-grid">
				<h3>Hover bar</h3>
				<input type="checkbox" id="bar-3">
				<div class="flexy-column">
					<div class="progress-factor flexy-item">
						<div class="progress-bar">
							<div class="bar has-rotation has-colors yellow move" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">
								<div class="bar-face face-position roof percentage"></div>
								<div class="bar-face face-position back percentage"></div>
								<div class="bar-face face-position floor percentage volume-lights"></div>
								<div class="bar-face face-position left"></div>
								<div class="bar-face face-position right"></div>
								<div class="bar-face face-position front percentage volume-lights shine"></div>
							</div>
						</div>
					</div>
				</div>
				<label class="value-label" for="bar-3">[ aria-valuenow = '90%' ]</label>
			</article>
		</section>

2. Теперь добавим стили CSS

	<link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.3.0/css/font-awesome.min.css" />
	<link rel="stylesheet" type="text/css" href="css/component.css" />
	<link rel="stylesheet" type="text/css" href="css/custom-bars.css" />

3. Подключаем javascript и jQuery

	<script src="js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" charset="utf-8">
		$("#change-color .bar").hover(function(){
			// $(this).toggleClass('active');
			$(this).find('.front').toggleClass('shine');
		});
		// $("#change-color .bar").click(function(){
		//     $(this).toggleClass('sleep');
		// });
	</script>

Готово.
Все файлы хранятся в исходнике урока.

delux

Предлагаю делиться опытом в сфере сайтостроения!

Читайте также:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.