Alaksandar Jesus Gene Alaksandar Jesus Gene - 4 months ago 8
AngularJS Question

Border to grow as progress bar in list item

I got a list of stages and on every click of next button the border should be red for the the active element.

The project is based on angularjs and below is my jsfiddle https://jsfiddle.net/alaksandarjesus/c51h4y5q/

The tasks are


  1. The red border should start from 0px of the active list and grow to 100%. Is it possible to animate border in that way using css transitions.

  2. Should have a down pointing arrow at middle bottom of the active li border.

  3. I want the list item widths to be evenly distributed.

    li{
    border-bottom:5px solid;
    list-style:none;
    text-align:center;
    width:90px;/*toggle this line*/
    }



If you comment this width attribute and see the border, you could get a better info on this.



var app = angular.module('testApp',[]);
app.controller('testController', function($scope){

$scope.items = ['stage-1','stage-2','stage-3','stage-4','stage-5','stage-6']
$scope.active = 0;

$scope.nxtClicked = function(){
if($scope.active < $scope.items.length-1){
$scope.active++;
}

}

$scope.bckClicked = function(){
if($scope.active > 0){
$scope.active--;
}
}

})

ul{
margin 0;
padding: 0;
display:flex;
justify-content:space-between;
}

li{
border-bottom:5px solid;
list-style:none;
text-align:center;
width:90px;
}

li.completed{
border-color:green;

}
li.incomplete{
border-color:#ddd;
}

li.active{
border-color:red;
}

<ul>
<li ng-repeat="item in items" ng-class="{'completed':$index<active, 'incomplete':$index>active,'active':$index==active}">{{item}}</li>
</ul>

<button ng-click="nxtClicked()">Next</button>
<button ng-click="bckClicked()">Back</button>




Answer

I think you cannot animate the border of DOM-Element using css. But you can have a look at this Fiddle. I used the pseudo-elements after and before to make the animation. I hope this can help you and may give you the first steps to reach your goals. For the point 2., I'll add a span to the li-elements and position it absolutly. https://jsfiddle.net/Marouen/ebq90f5u/

[https://jsfiddle.net/Marouen/ebq90f5u/][1]