https://community.hubspot.com/t5/CMS-Development/HubL-with-Javascript-Progress-Bar/m-p/580877#M27511 <P>Hi there,</P><P>&nbsp;</P><P>I've been trying to implement a progress bar as a HubSpot custom module but the HubL field seems to not be stored in my Javascript variable. Could anyone share insights on what might be wrong? Please find the HTML, CSS, JS and JSON files below.<BR /><BR /></P><P>&nbsp;</P><P>&nbsp;</P><LI-CODE lang="markup">&lt;div id="container"&gt;&lt;/div&gt; &lt;div class="maximum"&gt;{{ module.percentage }}&lt;/div&gt;</LI-CODE><LI-CODE lang="css">#container { margin: 20px; width: 400px; height: 8px; position: relative; } #maximum { display: none; } </LI-CODE><LI-CODE lang="javascript">var bar = new ProgressBar.Line(container, { strokeWidth: 4, easing: 'easeInOut', duration: 5000, color: '#FF2170', trailColor: '#eee', trailWidth: 1, svgStyle: {width: '100%', height: '100%'}, text: { style: { // Text color. // Default: same as stroke color (options.color) color: '#ff2170', position: 'absolute', right: '0', top: '30px', padding: 0, margin: 0, transform: null }, autoStyleContainer: false }, from: {color: '#FF2170'}, to: {color: '#FF2170'}, step: (state, bar) =&gt; { bar.setText(Math.round(bar.value() * 100) + ' %'); } }); var maxm = document.querySelectorAll('.maximum'); bar.animate(maxm); // Number from 0.0 to 1.0</LI-CODE><LI-CODE lang="markup">[ { "name": "percentage", "label": "Progress Percentage (in %)", "required": false, "locked": false, "display": "slider", "min": 0.01, "max": 1, "step": 0.01, "type": "number", "prefix": "", "suffix": "", "default": null } ]</LI-CODE><P>&nbsp;</P><P>&nbsp;</P> Tue, 22 Feb 2022 11:15:07 GMT VGentile 2022-02-22T11:15:07Z