<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link href="https://fonts.googleapis.com/css?family=Oxygen|Raleway&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <script src="./js/js-fluid-meter.js"></script> <title>Document</title> </head> <body> <div class="container"> <div class="row"> <div class="col text-center"> <div id="fluid-meter" class="mx-auto"></div> <input type="text" id="percentage-1" type="number" value="50"> <button id="submit-percentage-1">submit</button> </div> <div class="col text-center"> <div id="fluid-meter-2"></div> <input type="text" id="percentage-2" type="number" value="50"> <button id="submit-percentage-2">submit</button> </div> <div class="col text-center"> <div id="fluid-meter-3"></div> <input type="text" id="percentage-3" type="number" value="50"> <button id="submit-percentage-3">submit</button> </div> </div> </div> <script> var fm = new FluidMeter(); fm.init({ targetContainer: document.getElementById("fluid-meter"), fillPercentage: 15, options: { fontFamily: "Raleway", drawPercentageSign: false, drawBubbles: true, size: 300, borderWidth: 19, backgroundColor: "#e2e2e2", foregroundColor: "#fafafa", foregroundFluidLayer: { fillStyle: "purple", angularSpeed: 100, maxAmplitude: 12, frequency: 30, horizontalSpeed: -150 }, backgroundFluidLayer: { fillStyle: "pink", angularSpeed: 100, maxAmplitude: 9, frequency: 30, horizontalSpeed: 150 } } }); var fm2 = new FluidMeter(); fm2.init({ targetContainer: document.getElementById("fluid-meter-2"), fillPercentage: 75, options: { fontFamily: "Oxygen", drawPercentageSign: true, drawBubbles: true, size: 300, borderWidth: 10, backgroundColor: "#262626", foregroundColor: "#4C4A4A", foregroundFluidLayer: { fillStyle: "#55DD10", angularSpeed: 90, maxAmplitude: 11, frequency: 25, horizontalSpeed: -200 }, backgroundFluidLayer: { fillStyle: "#CDDD10", angularSpeed: 100, maxAmplitude: 13, frequency: 23, horizontalSpeed: 230 } } }); var fm3 = new FluidMeter(); fm3.init({ targetContainer: document.getElementById("fluid-meter-3"), fillPercentage: 45, options: { fontSize: "30px", drawPercentageSign: true, drawBubbles: false, size: 300, borderWidth: 19, backgroundColor: "#e2e2e2", foregroundColor: "#fafafa", foregroundFluidLayer: { fillStyle: "#16E1FF", angularSpeed: 30, maxAmplitude: 5, frequency: 30, horizontalSpeed: -20 }, backgroundFluidLayer: { fillStyle: "#4F8FC6", angularSpeed: 100, maxAmplitude: 3, frequency: 22, horizontalSpeed: 20 } } }); window.onload = function () { document.getElementById("submit-percentage-1").onclick = function () { fm.setPercentage(Number(document.getElementById('percentage-1').value)) } document.getElementById("submit-percentage-2").onclick = function () { fm2.setPercentage(Number(document.getElementById('percentage-2').value)) } document.getElementById("submit-percentage-3").onclick = function () { fm3.setPercentage(Number(document.getElementById('percentage-3').value)) } }; </script> </body> </html>