Angular.js Progress Bars

angular-js-progress-bars.markdown

Angular.js Progress Bars

It's amazing what you can do with some simple math inside Angular.js expressions. Here are some dynamically populated progress bars that are meant to show how a particular group of giving opportunities are doing.

A Pen by Mark Hillard on CodePen.

License.

index.html

<div class="container" ng-app="progressApp" ng-controller="progressBars">
    <h1>Angular.js Progress Bars</h1>
    <div class="fund" ng-repeat="give in fundData">
        <h2>Fund: {{give.fund}}</h2>
        <div class="progress">
            <div class="bar" ng-style="{width:{{((give.raised / give.goal) * 100)}} + '%'}">
                <!-- show calculated percentage if total amount raised is <= 100% -->
                <span class="percent" ng-show="((give.raised / give.goal) * 100) <= 100">{{((give.raised / give.goal) * 100) | number:0}}%</span>
                <!-- show maximum percentage if total amount raised is > 100% -->
                <span class="percent" ng-show="((give.raised / give.goal) * 100) > 100">100%</span>
            </div>
        </div>
        <span class="goal">Raised: {{give.raised | currency:"$":0}} &nbsp;&compfn;&nbsp; Goal: {{give.goal | currency:"$":0}}</span>
        <a class="donate" ng-href="{{give.link}}">Donate &raquo;</a>
    </div>
</div>

script.js

var app = angular.module('progressApp', []);

app.controller('progressBars', ['$scope',
    function($scope) {
        $scope.fundData = [{
            "fund": "General",
            "goal": "10000",
            "raised": "4650",
            "link": "#general"
        }, {
            "fund": "Education",
            "goal": "5000",
            "raised": "1725",
            "link": "#education"
        }, {
            "fund": "Music",
            "goal": "3500",
            "raised": "4900",
            "link": "#music"
        }];
    }
]);

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>

style.css

/* Global Styles */

@import url("//fonts.googleapis.com/css?family=Open+Sans:300,400");

html,body {
background-color:#6495ed;
color:#fff;
font-family:"Open Sans", arial, sans-serif;
font-size:100%;
font-weight:300;
line-height:1.45;
overflow-x:hidden;
}

.container {
margin:0 auto;
padding:0 0 5%;
width:85%;
}

h1 {
color:#dfe2ed;
font-size:2.5rem;
line-height:1.1;
margin:5% 0;
}

h2 {
font-size:1.1rem;
font-weight:400;
margin:0 0 2.5%;
}


/* Fund Styles */

.fund {
background-color:rgba(0,0,0,.06);
border-radius:4px;
margin:0 0 4%;
padding:2.5% 3.5%;
}

.fund:last-child {
margin-bottom:4%;
}

.progress {
background-color:#bdd3fb;
border-radius:4px;
box-shadow:0 1px 1px rgba(0,0,0,.15) inset;
height:27px;
margin-bottom:2%;
overflow:hidden;
}

.bar {
background-color:#427ae3;
box-shadow:0 -1px 1px rgba(0,0,0,.15) inset;
color:#fff;
float:left;
height:100%;
position:relative;
text-align:left;
}

.bar > .percent {
font-size:.9rem;
left:8px;
position:absolute;
top:3px;
}

.goal {
color:#dfe2ed;
}

.donate {
color:#fff;
float:right;
font-weight:400;
text-decoration:none;
}

.donate:hover {
text-decoration:underline;
}


/* Responsive */

@media only screen and (max-width:600px) {
    h1 {
    font-size:2rem;
    margin:8% 0;
    }
    
    .fund {
    margin:0 0 10%;
    padding:5%;
    }
}

@media only screen and (max-width:480px) {
    h1 {
    font-size:1.4rem;
    }
    
    .donate {
    display:block;
    float:none;
    margin-top:3%;
    }
}