AngularJS Skills

AngularJS-Skills.markdown

AngularJS Skills

Skills by AngularJS directive

A Pen by Roman Budnikov on CodePen.

License.

index.html

<div ng-init="skills=[{language: 'Ruby', percentage: 100, color: '#F3C128'}, {language: 'AngularJS', percentage:60, color: '#C799FF'},{language: 'CSS3', percentage:50, color: '#FF5353'}, {language: 'HTML5', percentage: 70, color: '#1CDCFF'}, {language: 'jQuery', percentage: 80, color: '#7CD14E'}]"></div>
<div class="skills" data-timeout="500" data-speed="0.5"></div>

script.coffee

angular.module "myApp", ["myApp.directives"]

angular.module("myApp.directives", []).directive "skills", ->
  restrict: "C"
  controller: ['$scope', '$element', '$attrs', '$timeout', '$compile', ($scope, $element, $attrs, $timeout, $compile)->
    angular.forEach $scope.skills, (value, index)->
      time = (Math.random()*1)+parseFloat($attrs.speed)
      skill =  $compile("<div id='skills_"+value.language.toLowerCase()+"' style='transition: width "+time+"s; -webkit-transition: width "+time+"s; -o-transition: width "+time+"s; -moz-transition: width "+time+"s; background-color: "+value.color+"'><span>"+value.language+"</span></div>")($scope)
      $element.append skill
      $timeout(-> 
        skill.css({width: value.percentage+'%'})
      $attrs.timeout)
  ]

angular.bootstrap document, ['myApp']

style.scss

@import "compass/css3";
@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300&subset=latin,cyrillic);
.skills {
    width: 98%;
    font-family: 'Open Sans Condensed', sans-serif;
    
    div{
        width: 0%;
        overflow: hidden;
        margin: 10px;
        border-radius: 5px;
            
        span{
            display: block;
            font-size: 18px;
            padding: 7px 10px;
            text-shadow: 1px 1px #d3d3d3;
        }
    }
}