Water Level

Copy and paste the following shortcode into your post or page.

<?php
echo 'Hello, world!';

<style>
			.wc_1{--s:200px;--wc:#b4b0eb;display:flex;flex-wrap:wrap;gap:26px;justify-content:center;align-items:flex-start;font-family:inherit;}
			.wc_1 .wc-title{flex:0 0 100%;text-align:center;font-weight:600;font-size:16px;margin-bottom:4px;color:#333333;}
			.wc_1 .wc-item{display:flex;flex-direction:column;align-items:center;gap:10px;width:var(--s);}
			.wc_1 .wc-ball{position:relative;width:var(--s);height:var(--s);border-radius:50%;overflow:hidden;box-sizing:border-box;background:#eaf3fb;border:5px solid var(--wc);}
			.wc_1 .wc-fill{position:absolute;left:0;right:0;bottom:0;height:var(--p);background:var(--wc);transition:height 1.1s ease;}
			.wc_1 .wc-wave{position:absolute;left:0;bottom:100%;width:200%;height:16px;animation:wc_1-move 2.5s linear infinite;}
			.wc_1 .wc-wave svg{display:block;width:100%;height:100%;}
			.wc_1 .wc-txt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:33px;color:#6960e0;text-shadow:0 1px 2px rgba(255,255,255,.55);}
			.wc_1 .wc-label{font-size:13px;color:#333333;text-align:center;line-height:1.2;}
			@keyframes wc_1-move{to{transform:translateX(-50%);}}
			</style><div class="wc_1"><div class="wc-title">Water Content</div><div class="wc-item"><div class="wc-ball"><div class="wc-fill" style="--p:30%;"><div class="wc-wave"><svg viewBox="0 0 240 16" preserveAspectRatio="none"><path d="M0 8 Q30 2 60 8 T120 8 T180 8 T240 8 V16 H0 Z" fill="#b4b0eb"/></svg></div></div><div class="wc-txt">30%</div></div><div class="wc-label">Cucumber</div></div><div class="wc-item"><div class="wc-ball"><div class="wc-fill" style="--p:92%;"><div class="wc-wave"><svg viewBox="0 0 240 16" preserveAspectRatio="none"><path d="M0 8 Q30 2 60 8 T120 8 T180 8 T240 8 V16 H0 Z" fill="#b4b0eb"/></svg></div></div><div class="wc-txt">92%</div></div><div class="wc-label">Watermelon</div></div><div class="wc-item"><div class="wc-ball"><div class="wc-fill" style="--p:84%;"><div class="wc-wave"><svg viewBox="0 0 240 16" preserveAspectRatio="none"><path d="M0 8 Q30 2 60 8 T120 8 T180 8 T240 8 V16 H0 Z" fill="#b4b0eb"/></svg></div></div><div class="wc-txt">84%</div></div><div class="wc-label">Apple</div></div><div class="wc-item"><div class="wc-ball"><div class="wc-fill" style="--p:74%;"><div class="wc-wave"><svg viewBox="0 0 240 16" preserveAspectRatio="none"><path d="M0 8 Q30 2 60 8 T120 8 T180 8 T240 8 V16 H0 Z" fill="#b4b0eb"/></svg></div></div><div class="wc-txt">74%</div></div><div class="wc-label">Banana</div></div></div>

[skillwrapper type="skt_watercontent" chart_title="Water Content" text_color="#333333" bar_percentcolor="#6960e0" water_color="#b4b0eb" size="200" max="100"]

[skill label="Cucumber" value="30"]

[skill label="Watermelon" value="92"]

[skill label="Apple" value="84"]

[skill label="Banana" value="74"]

[/skillwrapper]

Water Content

30%

Cucumber

92%

Watermelon

84%

Apple

74%

Banana