SOURCE

/*////////////////////////////////////////////
	#	
	# Attaches animated circular bars to desired element
	# 
	# Uses GSAP and jQuery
	#
///////////////////////////////////////////*/

var $Bars = function(target,type,size,animateHalf,barAnimationSettings){
	
	var $b = function(){};
	
	// GSAP instances
	let Timeline = window.TimelineMax;
	let Tween 	 = window.TweenMax;
	
	/*////////////////////////////////////////////
	----	Settings
	///////////////////////////////////////////*/
	
	$b.target				= target || {};
	$b.type 				= type || 'linear';
	$b.animateHalf	= animateHalf || false;
	
	$b.size					= size || $b.target.width();
	$b.radius 			= size / 2 || $b.target.width() / 2;
	$b.angle 				= 0;
	$b.steps 				= 360 / $b.radius;
	$b.step 				= 0;
	
	$b.controls			= {};
	
	$b.animationSettings	= {
		
		// Bar movement speed
		speed		: () => { return 0.4 * ( Math.random() + 0.8 ); },
		
		// Bar height 
		height		: () => { return (( Math.random() + 0.2 ) * 20 ); },
		
		// Bar opacity
		opacity		: () => { return 1 - Math.random(); }
		
	};
	
	// Extend default bar animation settings
	$.extend( $b.animationSettings,barAnimationSettings );
	
	/*////////////////////////////////////////////
	----	Functions
	///////////////////////////////////////////*/
	
	// Create circular bars and attach them to target object
	$b.createCircularBars = function(){
		
		for(let i = 0; i < this.radius; i++ ){
			
			if($b.animateHalf && i >= this.radius / 2 ) continue;
			
			var bar = {};
			
			bar.x = this.radius + ( this.radius * Math.sin( this.angle ) );
			bar.y = this.radius + ( this.radius * Math.cos( this.angle ) );
			
			this.angle += ( Math.PI * 2 ) / this.radius;
			
			bar.item = $('<div class="bar-item" />');
			Tween.set( bar.item,{
				
				x			    : bar.x,
				y	        : bar.y,
				rotation	: this.step
				
			});
			
			$b.target.append( bar.item );
			
			this.step -= this.steps;
			
		};
		
	};
	
	// Create linear bars and attach them to target object
	$b.createLinearBars = function(){
		
		for( let i = 0; i < this.size; i++ ){

			if( i % 5 !== 0 ) continue;
			
			let bar = {};
			
			bar.x = i;
			
			bar.item = $('<div class="bar-item" />');
			Tween.set( bar.item,{
				
				x			: bar.x
				
			});
			
			$b.target.append( bar.item );
			
		};
		
	}
	
	// Play the timeline
	$b.controls.play = () => {
		
		Tween.to( $b.target,2,{opacity: 1, ease: window.Power3.easeOut});
		
		$b.timeline.play();
		
	};
	
	// Pause the timeline
	$b.controls.pause = () => {
		
		$b.timeline.pause();
		
	};
	
	/*////////////////////////////////////////////
	----	Timeline
	///////////////////////////////////////////*/
	
	$b.timeline = new Timeline({ paused:true });
	
	// Speed it up by 30%
	$b.timeline.timeScale( 1.3 );
	
	// Add starting marker
	$b.timeline.add( 'start',0 );
	
	// Fill target with bars
	if( $b.type == 'circular' ) { $b.createCircularBars() }
	else { $b.createLinearBars() }
		
	
	// Create animation timeline for bars
	$('.bar-item',$b.target).each(function(i){
		
		let barTween = Tween.to( $(this),$b.animationSettings.speed(),{
			
			opacity 	: $b.animationSettings.opacity(),
			height		: $b.animationSettings.height(),
			yoyo		  : true,
			repeat		: -1,
			force3D   : true
			
		});
		
		// Add bar tween to timeline with a slight delay
		
		$b.timeline.add( barTween,'start+='+( i/25 ));
		
		
	});
	
	return $b.controls;
	
};


// Put together a button and attach some event listeners
var button = new $Bars($('.circular-button .bars'), 'circular' ,76);

let isPlaying = false;

$('.circular-button').on('click',() => {
  
  if(!isPlaying) button.play();
  else button.pause();
  
  isPlaying = !isPlaying;
  
});

let colorScheme = 'blue';

$('.switch').on('click',function(){
  
  $('.demo').removeClass(colorScheme);
  
  colorScheme = $(this).attr('class').split(' ')[1];
  
  $('.demo').addClass(colorScheme);
  
});

setTimeout(function(){
   $('.circular-button').click();
},300);

<div class="demo blue">
  
  <div class="switches-title">Select theme color:</div>
  
  <div class="styleSwitches">
  
    <div class="switch blue"></div>
    <div class="switch black"></div>
    <div class="switch orange"></div>
    <div class="switch white"></div>
  
  </div>

  <div class="wrapper">

    <div class="circular circular-button">

      <div class="circular-icon">

        <a href="#" class="button-more">

          <i>
						
						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 306 306"><path d="M94.35 0l-35.7 35.7L175.95 153 58.65 270.3l35.7 35.7 153-153"/></svg>
					
					</i>

        </a>

        <div class="bars"></div>

      </div>

    </div>

  </div>

</div>

@mixin circular($iconSize: 20px, $iconColor: #777,$borderColor: rgba(255,255,255,0.2),$barColor: #333,$background-color: transparent){
	
	.circular {
		
		$padding: $iconSize + 2;
		$borderSize: 7px;
		
		margin: auto;
    cursor: pointer;
		
		.circular-icon {
			
			position: relative;
			display: inline-block;
					
			a {
				
				display: inline-block;
				position: relative;
				padding: $padding;
				border: $borderSize solid  $borderColor;
				border-radius: 60px;
				vertical-align: middle;
				z-index: 50;
				pointer-events: all;
				background-color: $background-color;
				
				i {
				
					display: block;
					width: $iconSize; height: $iconSize;
					
					svg {
						
						fill: $iconColor;
						
					}
					
				}
			
			}	
			
			.bars {
				
				$boxSize: ( $padding * 2 ) + $iconSize + ( $borderSize * 2 );
				
				position: absolute;
				top: 1px; left: 1px;
				width: $boxSize; height: $boxSize;
				opacity: 0;
				z-index: -1;
				
				.bar-item {
					
					position: absolute;
					width: 6px; height: 0;
					background-color: $barColor;
					transform-origin: left top;
					z-index: -1;
					
				}
				
			}
			
			.clipper {
				
				position: absolute;
				top: 0; left: 0;
				width: 100%; height: 100%;
				
				svg {
					
					circle {
						
						fill: red;
						
					}

				}
				
			}
				
		}
		
	}
	
}

$color-blue: #0ebdf7;
$color-black: #111;
$color-orange: #f6520a;
$color-white: #fff;

.styleSwitches {
  
   margin: 20px 0 0 10px;
  
  .switch {
  
    width: 20px; height: 20px;
    border-radius: 20px;
    display: inline-block;
    margin: 5px;
    cursor: pointer;
    transition: all linear 0.25s;

    &.blue { background-color: $color-blue }
    &.black { background-color: $color-black; border: 1px solid #333; }
    &.orange { background-color: $color-orange }
    &.white { background-color: $color-white; border: 1px solid #ccc; }
    
    &:hover { transform: scale(1.4) }
    
  }  
  
}

.demo {
  
  .switches-title, .styleSwitches {
    
     display: inline-block;
     vertical-align: middle;
    
  }
  
  .switches-title {

    font-family: 'Lato', sans-serif;
    font-size: 18px;
    letter-spacing: 1px;
    margin: 18px 0 0 20px;
    transition: color ease-out 0.25s;
    
  }
  
  .wrapper {
  
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: -1;
    display: flex;
    transition: background-color ease-out 0.25s;

  }
  
  &.blue{ 
    
    .switches-title {color: $color-white;}
    
    .wrapper { 
    
      @include circular($borderColor: rgba(255,255,255,0.05),$iconColor: $color-blue,$barColor: $color-blue);
      background-color: #111;
      
    }  
    
  }
  
  &.black {
    
    .switches-title {color: $color-black;}
  
    .wrapper { 
    
      @include circular($borderColor: rgba(0,0,0,0.65),$iconColor: $color-black,$barColor: $color-black);
      background-color: #eee;
      
    }  
    
  }
  
  &.orange {
  
    .switches-title {color: $color-black;}
  
    .wrapper { 
    
      @include circular($borderColor: rgba(0,0,0,0.05),$iconColor: $color-orange,$barColor: $color-orange);
      background-color: #eee;
      
    }  
    
  }
  
  &.white {
    
    .switches-title {color: $color-white;}
    
    .wrapper { 
    
      @include circular($borderColor: rgba(255,255,255,0.85),$iconColor: $color-white,$barColor: $color-white);
      background-color: #111;
      
    }  
    
  }

}