JS widget wave JS implementation of wave progress bar animation style

Waveloading

JS Plug-in implementation 360 Spherical wave animation scoring style / Wave progress bar 

Customizable parameters

• Radius of sphere ：radius default:200 type:number

• Progress bar value ：value default:50 type:number

• Speed of motion ：speed default:2000 type:number

• The background color ：bg_color default:[’#F1400D’,’#FA972C’] type:Array

• Front end wave color :color defaule:‘rgba(206,206,206, .3)’ type:String

html

introduce wave.js
<script src="./wave.js"></script>

javascript

  	window.onload=function(){
  		var conva = new Waveloding('wave',{
  			'radius':200,
  			'value':30,
  			'speed':2000,
  			'bg_color':['red','blue'],
  			'color':'rgba(206,206,206, .3)'		
  		});
  	};

The effect is as follows

Source reference

	


/*Author:Ming.Zhu * Date:2018/11/7 * Wave.js allowed U draw a fatastic Wave loading animation */
	


function Waveloding(node,options){
    




		this.WaveElement = document.getElementById(node); 

		var __options__ = {
    };
		__options__.width = options.radius == undefined?200 : options.radius;
		__options__.height = options.radius == undefined? 200:options.radius;
		__options__.value = options.value == undefined? 50:options.value;
		__options__.speed = options.speed == undefined? 2000:options.speed;
		__options__.bg_color = options.bg_color == undefined? ['#F1400D','#FA972C']:options.bg_color;
		__options__.color = options.color == undefined? 'rgba(206,206,206, .3)':options.color;
		this.WaveElement.setAttribute('height',__options__.height + 'px') ;
		this.WaveElement.setAttribute('width',__options__.width + 'px') ;

		String.prototype.signMix= function() {
    
		    if(arguments.length === 0) return this;
		    var param = arguments[0], str= this;
		    if(typeof(param) === 'object') {
    
		        for(var key in param)
		            str = str.replace(new RegExp("\\{" + key + "\\}", "g"), param[key]);
		        return str;
		    } else {
    
		        for(var i = 0; i < arguments.length; i++)
		            str = str.replace(new RegExp("\\{" + i + "\\}", "g"), arguments[i]);
		        return str;
		    }
		}
		var default_options = {
    
			'display':'block',
	        'box-sizing':' content-box',
	        'padding':' 5px',
	        'background':' -moz-linear-gradient(top, {0} 0%, {1} 100%)'.signMix(__options__.bg_color[1], __options__.bg_color[0]),
	        'background':' -webkit-gradient(linear, left top, left bottom, color-stop(0%,{0}), color-stop(100%,{1}))'.signMix(__options__.bg_color[1], __options__.bg_color[0]),
	        'background':' -webkit-linear-gradient(top, {0} 0%,{1} 100%)'.signMix(__options__.bg_color[1], __options__.bg_color[0]),
	        'background':' -o-linear-gradient(top, {0} 0%,{1} 100%)'.signMix(__options__.bg_color[1], __options__.bg_color[0]),
	        'background':' -ms-linear-gradient(top, {0} 0%,{1} 100%)'.signMix(__options__.bg_color[1], __options__.bg_color[0]),
	        'background':' linear-gradient(to bottom, {0} 0%,{1} 100%)'.signMix(__options__.bg_color[1], __options__.bg_color[0]),
	        'border-radius':' 100%',
	        'position':' relative',
	        'top':' 50%',
	    }

	    for(var key in default_options){
    
	    	this.WaveElement.style[key] = default_options[key]
	    }

	    let ctx = this.WaveElement.getContext('2d');

	    let radians = (Math.PI / 180) * 180;
	    let startTime = Date.now();
	    let time = __options__.speed;
	    let clockwise = 1;
	    let cp1x, cp1y, cp2x, cp2y;
	    let value = __options__.value;
	    
	    requestAnimationFrame(function waveDraw() {
      
	        let t = Math.min(1.0, (Date.now() - startTime) / time);
	          
	        if(clockwise) {
    
	            cp1x = 90 + (55 * t);
	            cp1y = __options__.width-2*value-72 + (72 * t);
	            cp2x = 92 - (51 * t);
	            cp2y = __options__.width-2*value+79 - (79 * t);
	        } else {
    
	            cp1x = 145 - (55 * t);
	            cp1y = __options__.width-2*value - (72 * t);
	            cp2x = 41 + (51 * t);
	            cp2y = __options__.width-2*value + (79 * t);
	        }
	        
	        ctx.clearRect(0, 0, __options__.width, __options__.width); 
	        ctx.beginPath();
	        ctx.moveTo(0, __options__.width-2*value);
	        //  Draw the Bessel curve three times 
	        ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, __options__.width, __options__.width-2*value);
	        //  Draw the arc 
	        ctx.arc(__options__.width/2, __options__.width/2, __options__.width/2, 0, radians, 0);

	        // Draw fractional text 
	        ctx.font = '{0}px Arial'.signMix(__options__.width/3);
	        ctx.textAlign = 'center';
	        ctx.fillStyle = '#fff';
	        ctx.fillText(__options__.value, __options__.width/2.4, __options__.width/1.7)

	        // Draw text 
	        ctx.font = '{0}px Arial'.signMix(__options__.width/5);
	        ctx.textAlign = 'center';
	        ctx.fillStyle = '#fff';
	        ctx.fillText(' branch ', __options__.width/1.26, __options__.width/1.7)

	        // Paint track fill color , That is, dynamic wavy line color 
	        ctx.fillStyle = __options__.color;
	        // ctx.strokeStyle = "yellow";
	        ctx.fill();

	        ctx.save();  
	        
	        if( t == 1 ) {
    
	            startTime = Date.now();
	            clockwise = !clockwise;
	        } 

	        requestAnimationFrame(waveDraw);
	    });


}