For actual use, here is ui_template version of similarly looking thing. Acts in many ways, from bottom up, from top down, from side or from both sides. And can be round.
[{"id":"9821976d.81e4a8","type":"inject","z":"9f4fbba4.68ceb8","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"2","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":250,"y":1300,"wires":[["5d17609.94dd2a","9d583201.b3e3","7ceb37db.bf6158","9f86e34f.b94b5"]]},{"id":"5d17609.94dd2a","type":"random","z":"9f4fbba4.68ceb8","name":"","low":1,"high":"100","inte":"true","property":"payload","x":420,"y":1260,"wires":[["ff079329.434ad"]]},{"id":"9d583201.b3e3","type":"random","z":"9f4fbba4.68ceb8","name":"","low":1,"high":"100","inte":"true","property":"payload","x":420,"y":1340,"wires":[["a8b35e60.cbf8b","6a797db2.668714"]]},{"id":"a8b35e60.cbf8b","type":"ui_template","z":"9f4fbba4.68ceb8","group":"19f5ed07.08a453","name":"simple level blue ","order":9,"width":3,"height":3,"format":"<div id=\"{{'level_'+$id}}\" class=\"simple-gauge\">\n <div class=\"leveltext title\">LEVEL</div>\n <div class=\"leveltext value\"></div>\n <div class='levelbody' style='background:#2196f399;'></div>\n <div class='levelframe' style='border-color:#2196f3; border-width:2px;'></div>\n</div>\n<script>\n(function(scope) {\n \n scope.$watch('msg', function(msg) {\n if (msg) {\n if(!$(\"#level_\"+scope.$id)){\n return\n }\n $(\"#level_\"+scope.$id).find(\".levelbody\").css(\"height\",msg.payload+\"%\")\n $(\"#level_\"+scope.$id).find(\".value\").text(msg.payload+\"%\")\n }\n });\n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":640,"y":1340,"wires":[[]]},{"id":"9139794a.12e668","type":"ui_template","z":"9f4fbba4.68ceb8","group":"19f5ed07.08a453","name":"simple level top down","order":12,"width":3,"height":3,"format":"<div id=\"{{'level_'+$id}}\" class=\"simple-gauge\">\n <div class=\"leveltext title\">BLINDS</div>\n <div class=\"leveltext value\"></div>\n <div class='levelbody topdown' style='background:\"#FFFFCCf7\";'></div>\n <div class='levelframe' style='border-color:\"#FFFFFF\"; border-width:6px;'></div>\n</div>\n\n<script>\n(function(scope) {\n \n scope.$watch('msg', function(msg) {\n if (msg) {\n if(!$(\"#level_\"+scope.$id)){\n return\n }\n $(\"#level_\"+scope.$id).find(\".levelbody\").css(\"height\",msg.payload+\"%\")\n $(\"#level_\"+scope.$id).find(\".value\").text(msg.payload+\"%\")\n }\n });\n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":660,"y":1300,"wires":[[]]},{"id":"a78d7f3c.66fc6","type":"ui_template","z":"9f4fbba4.68ceb8","group":"19f5ed07.08a453","name":"simple-gauge css","order":3,"width":0,"height":0,"format":"<style id=\"simple-gauge\">\n\n.simple-gauge{\n overflow:hidden;\n position:relative;\n width:100%;\n height:100%;\n}\n.levelbody.side.right {\n right:0;\n}\n.levelbody.side.left {\n left:0;\n}\n.levelbody.side {\n height:100%;\n width:0%;\n}\n.levelbody.topdown {\n bottom: unset;\n top:0;\n}\n.levelbody.round {\n height:100%;\n width:100%;\n}\n.levelbody{\n background: #FFFFCCf7;\n height: 0%;\n position: absolute;\n width: 100%;\n bottom: 0;\n z-index:0;\n transition: all 1s;\n box-shadow: inset 0px 0px 10px 0px #00000080;\n}\n.bodywrap{\n position: absolute;\n clip-path: circle(50%);\n width: 100%;\n height: 100%;\n bottom: 0;\n}\n.levelframe.round{\n border-radius:50%;\n}\n.levelframe{\n position:absolute;\n box-sizing:border-box;\n background:transparent;\n height:100%;\n width: 100%;\n border:1px solid #FFFFFF ;\n box-shadow:inset 0px 0px 41px 0px #000000b5;\n bottom:0;\n z-index:1;\n}\n.leveltext{\n top:30%;\n position:relative;\n width:100%;\n text-align:center;\n text-shadow: 0px 0px 9px #191938c2;\n z-index:2;\n mix-blend-mode: exclusion;\n}\n.leveltext.value{\n font-size:25px;\n}\n.leveltext.title{\n}\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":650,"y":1420,"wires":[[]]},{"id":"ff079329.434ad","type":"ui_template","z":"9f4fbba4.68ceb8","group":"19f5ed07.08a453","name":"simple level side","order":11,"width":3,"height":3,"format":"<div id=\"{{'level_'+$id}}\" class=\"simple-gauge\">\n <div class=\"leveltext title\">BLINDS</div>\n <div class=\"leveltext value\"></div>\n <div class='levelbody side' style='background:\"#FFFFCCf7\";'></div>\n <div class='levelframe' style='border-color:\"#FFFFFF\"; border-width:6px;'></div>\n</div>\n\n<script>\n(function(scope) {\n \n scope.$watch('msg', function(msg) {\n if (msg) {\n if(!$(\"#level_\"+scope.$id)){\n return\n }\n $(\"#level_\"+scope.$id).find(\".levelbody\").css(\"width\",msg.payload+\"%\")\n $(\"#level_\"+scope.$id).find(\".value\").text(msg.payload+\"%\")\n }\n });\n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":640,"y":1260,"wires":[[]]},{"id":"e9e664c6.c84b48","type":"ui_template","z":"9f4fbba4.68ceb8","group":"19f5ed07.08a453","name":"simple level double side","order":13,"width":6,"height":3,"format":"<div id=\"{{'level_'+$id}}\" class=\"simple-gauge\">\n <div class=\"leveltext title\">CURTAINS</div>\n <div class=\"leveltext value\"></div>\n <div class='levelbody side left' style='background:\"#FFFFCCf7\";'></div>\n <div class='levelbody side right' style='background:\"#FFFFCCf7\";'></div>\n <div class='levelframe' style='border-color:\"#FFFFFF\"; border-width:6px;'></div>\n</div>\n\n<script>\n(function(scope) {\n \n scope.$watch('msg', function(msg) {\n if (msg) {\n if(!$(\"#level_\"+scope.$id)){\n return\n }\n $(\"#level_\"+scope.$id).find(\".levelbody.side\").css(\"width\",(msg.payload/2)+\"%\")\n \n $(\"#level_\"+scope.$id).find(\".value\").text(msg.payload+\"%\")\n }\n });\n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":670,"y":1220,"wires":[[]]},{"id":"6a797db2.668714","type":"ui_template","z":"9f4fbba4.68ceb8","group":"19f5ed07.08a453","name":"simple level blue round","order":10,"width":3,"height":3,"format":"<div id=\"{{'level_'+$id}}\" class=\"simple-gauge round\">\n <div class=\"leveltext title\">LEVEL</div>\n <div class=\"leveltext value\"></div>\n <div class=bodywrap>\n <div class='levelbody round' style='background:#2196f399;'></div>\n </div>\n <div class='levelframe round' style='border-color:#2196f3; border-width:2px;'></div>\n</div>\n<script>\n(function(scope) {\n \n scope.$watch('msg', function(msg) {\n if (msg) {\n if(!$(\"#level_\"+scope.$id)){\n return\n }\n $(\"#level_\"+scope.$id).find(\".levelbody\").css(\"top\",(100-msg.payload)+\"%\")\n $(\"#level_\"+scope.$id).find(\".value\").text(msg.payload+\"%\")\n }\n });\n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":660,"y":1380,"wires":[[]]},{"id":"9f86e34f.b94b5","type":"random","z":"9f4fbba4.68ceb8","name":"","low":1,"high":"100","inte":"true","property":"payload","x":420,"y":1220,"wires":[["e9e664c6.c84b48"]]},{"id":"7ceb37db.bf6158","type":"random","z":"9f4fbba4.68ceb8","name":"","low":1,"high":"100","inte":"true","property":"payload","x":420,"y":1300,"wires":[["9139794a.12e668"]]},{"id":"19f5ed07.08a453","type":"ui_group","name":"Default","tab":"c71e2691.3704f8","order":1,"disp":true,"width":"6","collapse":false},{"id":"c71e2691.3704f8","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]
