HubL with Javascript - Progress Bar

[VGentile]

Hi there,

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.

<div id="container"></div>

<div class="maximum">{{ module.percentage }}</div>

#container {
  margin: 20px;
  width: 400px;
  height: 8px;
  position: relative;
}
#maximum {
  display: none;
} 

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) => {
      bar.setText(Math.round(bar.value() * 100) + ' %');
    }
  });

  var maxm = document.querySelectorAll('.maximum');

  
  bar.animate(maxm);  // Number from 0.0 to 1.0

[
  {
    "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
  }
]

[Oezcan]

Hello @VGentile 

maybe this will help.

https://community.hubspot.com/t5/CMS-Development/Progress-bar-html-code/m-p/564074#M27036

Best regards,

Özcan