CMS Development

VGentile
Membre

HubL with Javascript - Progress Bar

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
  }
]

 

 

0 Votes
1 Réponse
Oezcan
Contributeur de premier rang | Partenaire solutions Diamond
Contributeur de premier rang | Partenaire solutions Diamond

HubL with Javascript - Progress Bar

0 Votes