Bubble Nav

/*Downloaded from https://www.codeseek.co/007design/bubble-nav-xbPZJG */
* {
  box-sizing: border-box;
}

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.circles {
  position: absolute;
  height: 0;
  width: 0;
}

.start-button {
  height: 75px;
  width: 75px;
  transition: 2s linear all;
}
.start-button .circle {
  height: 0;
  width: 0;
}
.start-button.active .button {
  margin: 5px 0 0 5px;
  height: 65px;
  width: 65px;
}

.circle {
  position: absolute;
  height: 100px;
  width: 100px;
  top: 0%;
  left: 0%;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  transition: 0.5s linear all;
  transition-timing-function: ease-in-out;
}
.circle.ng-hide-add, .circle.ng-hide-remove {
  height: 0;
  width: 0;
}
.circle.ng-hide-add, .circle.ng-hide-remove.ng-hide-remove-active {
  height: 100px;
  width: 100px;
}
.circle.ng-hide-add.ng-hide-add-active {
  height: 0;
  width: 0;
}

.button {
  position: absolute;
  height: 75px;
  width: 75px;
  top: -37.5px;
  left: -37.5px;
  background-color: #fff;
  border-radius: 50%;
  border: 2px solid #00a9e0;
  transition: 0.5s linear all;
}
.button p {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  color: #00a9e0;
  text-align: center;
  margin: 0;
  width: 100%;
}
.button.ng-hide-add, .button.ng-hide-remove {
  height: 0;
  width: 0;
  font-size: 0;
  top: 0;
  left: 0;
}
.button.ng-hide-add, .button.ng-hide-remove.ng-hide-remove-active {
  height: 75px;
  width: 75px;
  top: -37.5px;
  left: -37.5px;
  font-size: 1em;
}
.button.ng-hide-add.ng-hide-add-active {
  height: 0;
  width: 0;
  font-size: 0;
  top: 0;
  left: 0;
}

.line-container {
  position: absolute;
}

.line {
  position: absolute;
  width: 100px;
  border-top: 2px solid #00a9e0;
  transition: 0.5s linear all;
  transition-timing-function: ease-in-out;
}
.line.ng-hide-add, .line.ng-hide-remove {
  width: 0;
}
.line.ng-hide-add, .line.ng-hide-remove.ng-hide-remove-active {
  width: 100px;
}
.line.ng-hide-add.ng-hide-add-active {
  width: 0;
}

/*Downloaded from https://www.codeseek.co/007design/bubble-nav-xbPZJG */
angular.module('app', ['ngAnimate'])
.controller('buttonCtrl', function($scope){
  $scope.showButtons = true;
  
  $scope.circles = [90, 36, 270];
})

.directive('circle', function(){
  return {
    restrict: 'A',
    link: function(scope, elem, attrs, ctrl){
        
      function toRadians (angle) {
        return (angle * (Math.PI / 180));
      }

      function getPosition(angle){
        console.log(angle);
        var vals = [ Math.round(100 * Math.cos(toRadians(angle))),
                      Math.round(100 * Math.sin(toRadians(angle))) ];
        console.log(vals);
        return vals;  
      }

      scope.coords = getPosition(attrs.circle);
      
      $(elem).css({
        'transform': 'translate('+scope.coords[0]+'%, '+scope.coords[1] + '%)'
      });
    }
  };
})

.directive('line', function(){
  return {
    restrict: 'A',
    link: function(scope, elem, attrs){
      function toRadians (angle) {
        return (angle * Math.PI) / 180;
      }

      function getPosition(angle){
        console.log(angle);
        var vals = [ Math.round(100 * Math.cos(toRadians(angle))),
                      Math.round(100 * Math.sin(toRadians(angle))) ];
        console.log(vals);
        return vals;  
      }

      scope.coords = getPosition(attrs.line);
      
      $(elem).css({
        'top': scope.coords[1]*-1+'%',
        'left': scope.coords[0]*-1+'%',
        'transform': 'rotate('+(attrs.line)+'deg)'
      });
    }
  };
});