Conditional coloring on a lightning component

Probably the cleanest way would be to make three css classes and add them to the agreement rows in the your javascript code.

Since you haven't provided that code, we can go for the add in the markup technique:

Create three css classes:

.THIS .tier-one {
  background-color: red;
}
/*etc*/

Then in your iteration add this to the tr:

<tr class="{! cell.Progress__c gt 74 ? ' tier-three ' : 
              cell.Progress__c gt 49 ? ' tier-two   ' : 
              cell.Progress__c gt 0  ? ' tier-one   ' : ''}">

This is a use of nested terniary operators that could get messy, but I've tried to keep it neat for you.

EDIT An alternative technique:

Iterate the rows and add the classes in your server method call handler. This assumes you can add properties to your sObject class. If this proves to be problematic, change it's type to a generic object.

In your callback, I'm assuming you are setting agreementRows from your response. Just before you do that, do this:

var agreements = response.getReturnValue();
agreements.forEach(function(agreement){
  agreement.displayClass = (agreement.Progress__c > 74 ? ' tier-three ' : 
                            agreement.Progress__c > 49 ? ' tier-two   ' : 
                            agreement.Progress__c > 0  ? ' tier-one   ' : '' );
});
component.set("v.agreementRows",agreements);

Then you can just have this in your markup:

<tr class="{!cell.displayClass}">