Skip to content

Instantly share code, notes, and snippets.

@pocari

pocari/progress.html

Last active August 29, 2015 14:19
Show Gist options
  • Save pocari/a8375aa0be6d03d0b6df to your computer and use it in GitHub Desktop.
Save pocari/a8375aa0be6d03d0b6df to your computer and use it in GitHub Desktop.
Download ZIP
css progress bar
Raw
progress.html
<!doctype>
<html lang="ja">
<!-- https://pocari.github.io/progress_bar/progress_bar_test.html -->
<head>
<title>progress bar demo</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.11.2.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="./bootstrap-progressbar.js"></script>
<link rel='stylesheet' id='style.css-css' href='./bootstrap-progressbar-3.3.4.css' />
<style>
</style>
<script>
function reload() {
location.reload();
}
$(document).ready(function() {
$('.progress .progress-bar').progressbar({display_text: 'center'});
});
</script>
</head>
<body>
<div class="container">
<div class="page-header">
Progress Bar demo
</div>
<div>
<div class="row">
<div class="col-xs-1">
header1
</div>
<div class="col-xs-11">
header2
</div>
</div>
<div class="row">
<div class="col-xs-1">
hoge
</div>
<div class="col-xs-11">
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-striped" role="progressbar" data-transitiongoal="20"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-1">
foo
</div>
<div class="col-xs-11">
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal="40"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-1">piyo</div>
<div class="col-xs-11">
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal="60"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-1">
hogera
</div>
<div class="col-xs-11">
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal="80"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-1">
piyora
</div>
<div class="col-xs-11">
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal="100"></div>
</div>
</div>
</div>
</div>
<button type="button" onclick="reload()" class="btn btn-default">update</button>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment