<main class="container text-center" ng-app='myApp'>
  <header>
    <h1>Nyancat CSS Experiments</h1>
  </header>
  
  <audio controls loop id="audio-player">
    <source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/367874/nyancat-loop.mp3" type="audio/mp3" />
  </audio>
  
  <div class="row">
    <div class="col-md-4">
      <article class="panel">
        <div class="panel-heading">Nyancat using DIV</div>
        <div class="panel-body">
          <nyan-cat></nyan-cat>
        </div>
      </article>
    </div>
    <div class="col-md-4">
    <article class="panel panel-success">
      <div class="panel-heading">Nyancat using SVG</div>
      <div class="panel-body">
        <nyan-cat></nyan-cat>
      </div>
    </article>
    </div>
    <div class="col-md-4">
    <article class="panel panel-warning">
      <div class="panel-heading">Nyancat using CANVAS</div>
      <div class="panel-body">
        <nyan-cat></nyan-cat>
      </div>
    </article>
    </div>
  </div>
  <div class="row">
    <div class="col-md-4">
      <article class="panel">
        <div class="panel-heading">Tail using DIV</div>
        <div class="panel-body">
          <nyan-cat-tail length="8" type="div"></nyan-cat-tail>
        </div>
      </article>
    </div>
    <div class="col-md-4">
      <article class="panel panel-success">
        <div class="panel-heading">Tail using SVG</div>
        <div class="panel-body">
          <nyan-cat-tail length="8" type="svg"></nyan-cat-tail>
        </div>
      </article>
    </div>
    <div class="col-md-4">
      <article class="panel panel-warning">
        <div class="panel-heading">Tail using CANVAS</div>
        <div class="panel-body">
          <nyan-cat-tail length="8" type="canvas"></nyan-cat-tail>
        </div>
      </article>
    </div>
  </div>

  <footer class="text-center">
    <p>
      Crafted with love, unicorn farts, and angel backhairs by the great
      <a href="https://codepen.io/xavisavvy">xavisavvy</a>
    </p>
  </footer>
</main>
@import "compass/css3";

body{
  background-color: #003366;
  footer, h1{
    color:white;
  }
  audio{
    margin: 15px 0 25px 0;
  }
}

nyan-cat-tail{
  display: block;
  
  tail-container{
    position: relative;
    display:flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    width:100%;
    height: 55px;
    
    tail-segment {
      $duration: 0.5s;
      width: 25px;
    
      &:nth-child(2){
        animation-delay: 0.3s;
      }
      
      &:nth-child(odd){
        animation-delay: 0.5s;
      }
      
      @include animation(upDown $duration infinite 0.3s);
      
      > div {
        display: block;
        height: 10px;
      }
    }
  }
}

@include keyframes( upDown ){
  0%{ align-self: flex-start; }
  25%{ align-self: flex-end; }
}

@mixin keyframes( $animationName ){
  @-webkit-keyframes $animationName { @content; }
  @-moz-keyframes $animationName { @content; }
  @-o-keyframes $animationName { @content; }
  @keyframes $animationName { @content; }
}
View Compiled
angular.module('myApp', ['myApp.directives', 'myApp.controllers'])
  .config(['$routeProvider',
    function($routeProvider) {
      $routeProvider.when('/', {
          templateUrl: 'main.html',
          controller: 'MainCtrl'
        })
        .otherwise({
          redirectTo: '/main'
        });
    }
  ]);

angular.module('myApp.controllers', [])
  .controller('MainCtrl', ['$scope', function($scope) {}]);

angular.module('myApp.directives', [])
  .directive('nyanCat', function() {
    return {
      restrict: 'E',
      replace: true,
      template: '<div>This is a kitteh test</div>',
    }
  });

angular.module('myApp.directives', [])
  .directive('nyanCatTail', function() {
    return {
      restrict: 'E',
      priority: 1000,
      scope:{
        length: '=',
        type: '='
      },
      template: '<tail-container><tail-segment ng-repeat="segment in segments" /></tail-container>',
      link: function(scope, elem, attrs){ 
        var audio = $('#audio-player')[0];
        audio.volume = 0.25;

        // Generate the appropriate number of segments desired
        scope.segments = [];
        for (i=0; i < scope.length; i++){
          scope.segments.push({
            class: 'segment-' + i
          });
        }
      }
    }
  });

angular.module('myApp.directives')
  .directive('tailSegment', function(){
      return{
        restrict: 'E',      
        scope: {
          thetype: '='
        },
        template: '<div ng-repeat="color in colors" ng-class="color.name" style="background-color: {{ color.hex }}"></div>',
        link: function(scope, elm, attrs){
          scope.colors = [
            { name: 'red', hex: '#FF1800' },
            { name: 'orange', hex: '#FF9A00' },
            { name: 'yellow', hex: '#FFEF00' },
            { name: 'green', hex: '#21DD00' },
            { name: 'blue', hex: '#008CFF' },
            { name: 'violet', hex: '#6942FF'}
          ];  
        }
      }
    });

External CSS

  1. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css

External JavaScript

  1. https://thegeek.github.io/AngularJs_Codepen_Assets/asset-jquery-twitterbootstrap-angularjs.min.js