Angular: Empty Fiddle
http://angularjs.org/
HTML
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div ng-controller='AppController'>
<form ng-submit="submit()">
<div progress>
<div bar class="bar progress-bar-striped {{progress_transition?'':'progress-no-transition'}}" value='dynamic'>
</div>
</div>
<input type=submit>
</form>
</div>
CSS
.progress-no-transition
{
-webkit-transition: none; /* Chrome */
transition: none;
}
CoffeeScript
testApp = angular.module 'testApp', ['ui.bootstrap']
testApp.controller 'AppController', ($scope, $timeout) ->
$scope.progress_transition = false
$scope.dynamic = 20
$scope.submit = ->
console.log("submit")
$scope.progress_transition = false
$timeout( ()->
$scope.dynamic = 0
console.log("to zero")
$timeout( ()->
$scope.progress_transition = true
$timeout( () ->
$scope.dynamic = 100
)
)
)
angular.bootstrap document, ["testApp"]