JSFiddle - React, Tailwind, and code Playground

by lottikarotti

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.1/angular.min.js"></script>
<div ng-app='app' ng-controller='AppCtrl'>
    <div class='container'>
        <h3>Your progress: {{ progress }} / 100</h3>
        <div class='progress'>
            <div class='progress-bar'
                ng-class='{
                    "progress-bar-danger": progress <= 25,
                    "progress-bar-warning": progress <= 75,
                    "progress-bar-success": progress <= 100
                }'
                ng-style='{
                    width: progress + "%"
                }'
            ></div>
        </div>
        <select class='form-control'
            ng-model='progress'
            ng-options='value for value in values'
        ></select>
    </div>
</div>

CSS

.progress-bar{
    -webkit-transition: .3s ease;
    -moz-transition: .3s ease;
    transition: .3s ease;
}

JavaScript

angular.module('app', [])
.controller('AppCtrl', [
    '$scope',
    function($scope){
        $scope.progress = 0;
        $scope.values = [0, 10, 25, 50, 75, 99, 100];
    }
]);