nicepaper @ ウィキ
nicepaper @ ウィキ

前回記事、HTMLとCSSで進捗バーを作る1では、静的に表示される進捗バーを作っていきました。 今回はアニメーションを利用して、動く進捗バーを作っていきたいと思います。10月11日記事

イメージ（上から下のように動きながら変化）



目次




コード

HTML部 

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>進捗バーの表示2</title>
</head>
<body>
<!--方法3:animationによる動的な進捗バーcssで操作-->
<div id="progress_contents3">
	<p>アニメーションによる動的な進捗バー：CSSで操作</p>
    <p class="bar_over"></p>
    <p class="bar_under"></p>
</div>
<!--方法4:animationによる動的な進捗バーhtmlで操作-->
<div id="progress_contents4">
	<p>アニメーションによる動的な進捗バー：HTMLで操作</p>
    <?php
	$percent5 = 70;
	?>
    <p class="bar_over" style="width:<?php echo $percent5; ?>%"></p>
    <p class="bar_under"></p>
</div>
</body>
</html>

CSS部 

@charset "UTF-8";

#progress_contents3{
	width: 400px;
	min-height: 100px;
	border: 1px solid #000;
	position:relative;
}

#progress_contents3 p.bar_over,#progress_contents3 p.bar_under {
	position: absolute;
	height: 30px;
	margin: 0;
}
#progress_contents3 p.bar_under {
	background: linear-gradient(#333, #000);
	background: -webkit-linear-gradient(#333, #000);
	background: -moz-linear-gradient(#333, #000);
	background: -ms-linear-gradient(#333, #000);
	background: -o-linear-gradient(#333, #000);
	width: 100%;
}
#progress_contents3 p.bar_over {
	background: linear-gradient(#0C0, #090);
	background: -webkit-linear-gradient(#0C0, #090);
	background: -moz-linear-gradient(#0C0, #090);
	background: -ms-linear-gradient(#0C0, #090);
	background: -o-linear-gradient(#0C0, #090);

	animation-name: anime1;
	animation-duration: 3s;
	animation-timing-function: ease;
	animation-delay: 2s;
	animation-iteration-count: 1;
	animation-direction: normal;

	-webkit-animation-name: anime1;
	-webkit-animation-duration: 3s;
	-webkit-animation-timing-function: ease;
	-webkit-animation-delay: 2s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-direction:normal;

	-moz-animation-name: anime1;
	-moz-animation-duration: 3s;
	-moz-animation-timing-function: ease;
	-moz-animation-delay: 2s;
	-moz-animation-iteration-count: 1;
	-moz-animation-direction: normal;

	-ms-animation-name: anime1;
	-ms-animation-duration: 3s;
	-ms-animation-timing-function: ease;
	-ms-animation-delay: 2s;
	-ms-animation-iteration-count: 1;
	-ms-animation-direction:normal;

	-o-animation-name: anime1;
	-o-animation-duration: 3s;
	-o-animation-timing-function: ease;
	-o-animation-delay: 2s;
	-o-animation-iteration-count: 1;
	-o-animation-direction:normal;

	width: 40%;
	z-index: 1;
}
@keyframes anime1 {
	from { width : 0%;}
	to {width: 40%;}
}
@-webkit-keyframes anime1 {
	from { width : 0%;}
	to {width: 40%;}
}
@-moz-keyframes anime1 {
	from { width : 0%;}
	to {width: 40%;}
}
@-ms-keyframes anime1 {
	from { width : 0%;}
	to {width: 40%;}
}
@-o-keyframes anime1 {
	from { width : 0%;}
	to {width: 40%;}
}


#progress_contents4{
	width: 400px;
	min-height: 100px;
	border: 1px solid #000;
	position:relative;
}

#progress_contents4 p.bar_over,#progress_contents4 p.bar_under {
	position: absolute;
	height: 30px;
	margin: 0;
}
#progress_contents4 p.bar_under {
	background: linear-gradient(#333, #000);
	background: -webkit-linear-gradient(#333, #000);
	background: -moz-linear-gradient(#333, #000);
	background: -ms-linear-gradient(#333, #000);
	background: -o-linear-gradient(#333, #000);
	width: 100%;
}
#progress_contents4 p.bar_over {
	background: linear-gradient(#0C0, #090);
	background: -webkit-linear-gradient(#0C0, #090);
	background: -moz-linear-gradient(#0C0, #090);
	background: -ms-linear-gradient(#0C0, #090);
	background: -o-linear-gradient(#0C0, #090);

	animation-name: anime2;
	animation-duration: 3s;
	animation-timing-function: ease;
	animation-delay: 2s;
	animation-iteration-count: 1;
	animation-direction: normal;

	-webkit-animation-name: anime2;
	-webkit-animation-duration: 3s;
	-webkit-animation-timing-function: ease;
	-webkit-animation-delay: 2s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-direction:normal;
	
	-moz-animation-name: anime2;
	-moz-animation-duration: 3s;
	-moz-animation-timing-function: ease;
	-moz-animation-delay: 2s;
	-moz-animation-iteration-count: 1;
	-moz-animation-direction: normal;

	-ms-animation-name: anime2;
	-ms-animation-duration: 3s;
	-ms-animation-timing-function: ease;
	-ms-animation-delay: 2s;
	-ms-animation-iteration-count: 1;
	-ms-animation-direction:normal;

	-o-animation-name: anime2;
	-o-animation-duration: 3s;
	-o-animation-timing-function: ease;
	-o-animation-delay: 2s;
	-o-animation-iteration-count: 1;
	-o-animation-direction:normal;
	z-index: 1;
}
@keyframes anime2 {
	from { width : 0%;}
}
@-webkit-keyframes anime2 {
	from { width : 0%;}
}
@-moz-keyframes anime2 {
	from { width : 0%;}
}
@-ms-keyframes anime2 {
	from { width : 0%;}
}
@-o-keyframes anime2 {
	from { width : 0%;}
}



まとめ

mysqlやphpでパーセントの情報を変更したい場合は、下側のprogress_contents4のほう（anime2）の方を使ってください。animationはベンダープレフィックスが多いですが、自分の好きなようにプロパティをいじってみてください。いじり方はhttp://www.htmq.com/css3/animation.shtmlで操作を確認できます。

以上

「HTMLとCSSで進捗バーを作る2」をウィキ内検索
最終更新：2015年10月13日 01:39
添付ファイル