Bootstrap Progress bar not showing

Question

Okay,

I'm using a small programming test to play around with Angular and Sinatra, and I'm done logic wise, but I wanted to add a small progress bar under the play field to show the moves made.

my haml template looks like this:

.progress.progress-striped.active
    .progress-bar{role: "progressbar", :"aria-valuenow" => "{{moves}}", :"aria-valuemin" => 0, :"aria-valuemax" => 9}
        %span.sr-only
            {{moves}} moves out of 9

I've added the Bootstrap CSS from the CDN to my project, but the bar is not working as I want to. I only see part of it:

Tried to play around with the classes, but it's not making any difference. I've checked whether I am using the correct classes, and this is also the case. I can also the see the aria- values being properly updated on every click, so the binding works as well.

source code: https://github.com/NekoNova/tictactoe Can someone give me a pointer as to what I am missing?

Answer 1

Just an alternative usage if you want to use angular-ui bootstrap you can use this library for smooth and easy usage:

%script{ type: "text/javascript", src: "//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.min.js" }

Add the module "ui.bootstrap" to your application:

var TicTacToeApp = angular.module('TicTacToeApp', ['ui.bootstrap']);

Here is the haml expression:

%progressbar{ :max => "max", value: "dynamic"}
  %span{ style: "color: white;white-space: nowrap;"}
    {{dynamic}} / {{max}}

And for some demostration here is the variables which need to put in your controller:

$scope.max = 100;
$scope.dynamic = 70;