bootstrap詳しくはないですが、
HTML
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5
6<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
7
8<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
9<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
10<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
11
12<script src="https://cdn.jsdelivr.net/npm/vue"></script>
13
14</head>
15<body>
16 <div id="app">
17 <div class="progress">
18 <div :class="calcClass" role="progressbar" :aria-valuenow="count" aria-valuemin="0" aria-valuemax="100"></div>
19 </div>
20 <div class="progress">
21 <div class="progress-bar" role="progressbar" :style="calcStyle" :aria-valuenow="count" aria-valuemin="0" aria-valuemax="100"></div>
22 </div>
23 </div>
24</body>
25<script>
26var app = new Vue({
27 el: '#app',
28 data: function() {
29 return({
30 count: 40,
31 });
32 },
33 computed: {
34 calcClass: function() {
35 return("progress-bar w-" + [25, 50, 75, 100][Math.floor(this.count / 25)]);
36 },
37 calcStyle: function() {
38 return("width: " + this.count + "%");
39 }
40 }
41});
42setInterval(function() {
43 app.count = Math.random() * 100;
44}, 1000);
45</script>
46</html>
47
こんな感じかしら
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/12/22 07:03