<div class="particularites__image particularites--composition">
								<span class="left">0<sub>%</sub></span>
								<svg id="svg" width="80" height="80" version="1.1" xmlns="http://www.w3.org/2000/svg" data-percent="30" class="compositionsvg">
									<circle r="40" cx="40" cy="40" class="pie"/>
								</svg>
								<span class="right">0<sub>%</sub></span>
							</div>
							<div class="particularites__image particularites--contenance particularites--text">
								<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" data-percent="40" style="display: none;" class="contenancesvg">
									<symbol id="wave">
										<path
											d="M420,20c21.5-0.4,38.8-2.5,51.1-4.5c13.4-2.2,26.5-5.2,27.3-5.4C514,6.5,518,4.7,528.5,2.7c7.1-1.3,17.9-2.8,31.5-2.7c0,0,0,0,0,0v20H420z"></path>
										<path
											d="M420,20c-21.5-0.4-38.8-2.5-51.1-4.5c-13.4-2.2-26.5-5.2-27.3-5.4C326,6.5,322,4.7,311.5,2.7C304.3,1.4,293.6-0.1,280,0c0,0,0,0,0,0v20H420z"></path>
										<path
											d="M140,20c21.5-0.4,38.8-2.5,51.1-4.5c13.4-2.2,26.5-5.2,27.3-5.4C234,6.5,238,4.7,248.5,2.7c7.1-1.3,17.9-2.8,31.5-2.7c0,0,0,0,0,0v20H140z"></path>
										<path
											d="M140,20c-21.5-0.4-38.8-2.5-51.1-4.5c-13.4-2.2-26.5-5.2-27.3-5.4C46,6.5,42,4.7,31.5,2.7C24.3,1.4,13.6-0.1,0,0c0,0,0,0,0,0l0,20H140z"></path>
									</symbol>
								</svg>
								<div class="box">
									<div id="water" class="water">
										<svg viewBox="0 0 560 20" class="water_wave water_wave_back">
											<use xlink:href="#wave"></use>
										</svg>
										<svg viewBox="0 0 560 20" class="water_wave water_wave_mid">
											<use xlink:href="#wave"></use>
										</svg>
										<svg viewBox="0 0 560 20" class="water_wave water_wave_front">
											<use xlink:href="#wave"></use>
										</svg>
									</div>
								</div>
								<span class="text">10 ML</span>
							</div>

$lightGreen: #34ba41;
$green: #31A63D;
$darkGreen: #21792b;
$system_font: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
html{
  height:100%
}
body{
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  height:100%;
}
.particularites{

	&__image{
		width: 160px; 
    height: 160px;
    margin:6px;
		border: 6px solid #31A63D;
		position: relative;
		font-family: $system_font;
    display: inline-block;

		img, .compositionsvg, .box{
			position: absolute;
    		left: 0; top: 0; bottom: 0; right: 0;
    		margin: auto;
		}


		// Variation avec texte vert à l'intérieur
		.text{
			// font-family: 'Raleway', Arial, sans-serif;
			font-weight:  700;
      width: 160px;
			font-size: 1rem;
			position: absolute; left: 0; right: 0;
			bottom: 5px;
			color: $green;
			font-family: $system_font;
			text-align: center;
      display: inline-block;
		}

	}

	&--composition{

		&.composition--small{

			.left{
				letter-spacing: 0;
			}

			svg{
				circle{
					r: 32;
				}
			}
		}

		svg{
		    transform: rotate(-90deg);
		    border-radius: 50%;
		    display: block;
		    width: 80px;
		    height: 80px;
			circle{
				fill: $green;
				stroke: $darkGreen;
				stroke-width: 80;
				stroke-dasharray: 251.327;
    			stroke-dashoffset: 251.327;
			}
		}
		.left, .right{
			font-weight:  700;
			font-size: 1rem;
			position: absolute;
			top: 50%;
			margin-top: -4px;

			sub{
				font-size: .7rem;
				vertical-align: middle;
			}
		}

		.left{
			color: #30a63c;
			left: 3px;
		}

		.right{
			color: #1f7528;
			right: 3px;
		}
	}

	&--contenance{

		&:before{
			content: "";
			height: 6px;
			width: 160px;
			position: absolute;
			left: 0; top: 50%; margin-top: -3px;
			z-index: 1;
			background: $green;
		}

		.box{
		  	height: 80px;
		  	width: 80px;

			border: 6px solid $green;
		  	background: #FFF;
		  	border-radius:100%;
		  	overflow: hidden;
		  	position: absolute; top: 50%; left: 50%;
		  	z-index: 2;
    		transform: translate(-50%, -50%);

		  	.water{
				position: absolute; left: 0; top: 0;
				z-index:2;
				width: 100%;
				height: 100%;
				transform:translate(0,100%);
				background: $lightGreen;

		    	&_wave{
					width: 200%;
					position: absolute;
					bottom: 100%;

			      	&_back {
			        	right: 0;
			        	fill: $darkGreen;
			        	animation: wave-back 1.4s infinite linear;
			      	}
			      	&_front {
			        	left: 0;
			        	fill: $lightGreen;
			        	margin-bottom: -1px;
			        	animation: wave-front .7s infinite linear;
			      	}
			      	&_mid{
			      		left: 0;
			        	fill: #2c9b38;
			        	animation: wave-mid 2s infinite linear;
			      	}
		    	}
		  	}
		}

		@keyframes wave-front {
		  100% {
		    transform: translate(-50%, 0);
		  }
		}

		@keyframes wave-mid {
		  100% {
		    transform: translate(-50%, 0);
		  }
		}

		@keyframes wave-back {
		  100% {
		    transform: translate(50%, 0);
		  }
		}
	}
	&__text{
		font-family: $system_font;
		font-size: 1rem;
		text-transform: uppercase;
		margin-top: 6px;
		text-align: center;
	}


}


// IE 10 - 11 hack
@media all and (-ms-high-contrast:none)
{
    .particularites--contenance{
		&:before{
			z-index: -1;
		}
		&.particularites__image{
			background: url('https://vapstation.com/wp-content/themes/vs/assets/img/ie/particularites/contenance.png');
			svg{
				display: none;
			}
		}
		.box{
			display: none;
		}
	}

	.particularites--composition{
		background: url('https://vapstation.com/wp-content/themes/vs/assets/img/ie/particularites/composition.png');
		&.particularites__image{
			svg{
				display: none;
			}
		}
	}

}

    function _pieChart(){

        if( !$('.particularites--composition').length ) return;

        var percent = parseInt( $('.compositionsvg').attr('data-percent'), 10),
            circle  = $('circle'),
            r       = circle.attr('r'),
            strokeDasharray = Math.PI*(r*2),
            val = 0,
            left = $('.particularites--composition .left'),
            right = $('.particularites--composition .right'),
            finalVals = { left :0 , right: 0 };

        if( percent === 100 )
            $('.particularites--composition').addClass('composition--small');

        circle.css({
            'stroke-dasharray' : strokeDasharray,
            'stroke-dashoffset': strokeDasharray
         });

        var pct = strokeDasharray - ((100-percent)/100) * strokeDasharray;

        TweenMax.to( circle, 1.2, { strokeDashoffset : pct, autoRound:false, ease: Circ.easeInOut, delay : 1 });

        var tween = TweenMax.to( finalVals, 1.2, { right:100-percent, left: percent, ease: Circ.easeInOut, delay : 1, onUpdate: function(){

            left.html( (finalVals.left  >> 0 ) + "%" );
            right.html( (finalVals.right  >> 0 )+ "%" );

        }});

    }

    function _contenance(){

        if(!$('.contenancesvg').length ) return;

        var cnt    =  document.getElementById("count");
        var water  =  document.getElementById("water");
        var percent=  parseInt( $('.contenancesvg').attr('data-percent'), 10 );
        var interval,
            current = 0;

        interval = window.setInterval(function(){
            current++;
            water.style.transform='translate(0'+','+(100-current)+'%)';

        if( current === percent ){
            window.clearInterval(interval);
        }

        }, 60);

    }

_pieChart();
_contenance();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js