1

I am trying to copy this from Code pen into my Visual Force Page: I added everything accordingly and the function of the Java script is being called upon load from the Apex controller but the Progress bar is not working and when I See the console log I see a number of error regarding CSS and it is not being able to find the CSS classes. Here is my code:

<apex:page id="Progress" controller="ProgressController"  action="{!LoadData}" >
   
    <script type="text/javascript">
 
    function progressBar(progressVal,totalPercentageVal = 100) {
      alert(JSON.stringify(totalPercentageVal));
    var strokeVal = (4.64 * 100) /  totalPercentageVal;
    var x = document.querySelector('.progress-circle-prog');
    x.style.strokeDasharray = progressVal * (strokeVal) + ' 999';
    var el = document.querySelector('.progress-text'); 
    var from = $('.progress-text').data('progress');
        alert(JSON.stringify(el));
    $('.progress-text').data('progress', progressVal);
    var start = new Date().getTime();
  
    setTimeout(function() {
        var now = (new Date().getTime()) - start;
        var progress = now / 800;
        el.innerHTML = progressVal / totalPercentageVal * 100 + '%';
        if (progress < 1) setTimeout(arguments.callee, 10);
    }, 10);

}
    </script>
    
     <style type="text/css">

.progress {
    position: absolute;   
    height: 160px;
    width: 160px;
    cursor: pointer;
    top: 50%;
    left: 50%;
    margin: -80px 0 0 -80px;
}

.progress-circle {
  transform: rotate(-90deg);
    margin-top: -40px;
}

.progress-circle-back {
    fill: none; 
    stroke: #D2D2D2;
    stroke-width:10px;
}

.progress-circle-prog {
    fill: none; 
    stroke: #7E3451;
    stroke-width: 10px;  
    stroke-dasharray: 0 999;    
    stroke-dashoffset: 0px;
    transition: stroke-dasharray 0.7s linear 0s;
}

.progress-text {
    width: 100%;
    position: absolute;
    top: 60px;
    text-align: center;
    font-size: 2em;
}
    </style>
   
    <apex:outputText id="Percentage" value="{!Grades}"/>
      <apex:outputText value="{!LoadProgressBar}" escape="false"></apex:outputText>
     <apex:outputText value="{!progressBar}" escape="false"></apex:outputText>

    
    <div id='meter'><div id='progress'></div> </div>
  
    
    <div class="progress">
    <svg class="progress-circle" width="200px" height="200px">
        <circle class="progress-circle-back"
                cx="80" cy="80" r="74"></circle>
        <circle class="progress-circle-prog"
                cx="80" cy="80" r="74"></circle>
    </svg>
      <div class="progress-text" data-progress="90"></div>
</div>  
</apex:page>

All I am getting is this: enter image description here

when I look at the console I see the following Errors : enter image description here

But as you can see in my Styles there is a Style class named: .progress-circle-prog but for some reason, it's not able to find it. Is this something to do with Salesforce?

1 Answer 1

2

I see you declare your <script> tag before html body. If you directly call a script tag it starts executing immediately. So by the time script tag crawls document using document.querySelector('.progress-circle-prog'); this might not be available.

Also I dont see jquery being imported, hoping that you missed adding in above code, but its there in your code in your org.

So if you do this.

<apex:page id="testPage">
    <style>

        * {
            margin: 0;
            padding: 0;
            font-family: 'Lato', sans-serif;
        }

        .progress {
            position: absolute;
            height: 160px;
            width: 160px;
            cursor: pointer;
            top: 50%;
            left: 50%;
            margin: -80px 0 0 -80px;
        }

        .progress-circle {
            transform: rotate(-90deg);
            margin-top: -40px;
        }

        .progress-circle-back {
            fill: none;
            stroke: #D2D2D2;
            stroke-width:10px;
        }

        .progress-circle-prog {
            fill: none;
            stroke: #7E3451;
            stroke-width: 10px;
            stroke-dasharray: 0 999;
            stroke-dashoffset: 0px;
            transition: stroke-dasharray 0.7s linear 0s;
        }

        .progress-text {
            width: 100%;
            position: absolute;
            top: 60px;
            text-align: center;
            font-size: 2em;
        }
    </style>


    <link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"/>
    <div class="progress">
        <svg class="progress-circle" width="200px" height="200px" xmlns="http://www.w3.org/2000/svg">
            <circle class="progress-circle-back"
                    cx="80" cy="80" r="74"></circle>
            <circle class="progress-circle-prog"
                    cx="80" cy="80" r="74"></circle>
        </svg>
        <div class="progress-text" data-progress="0">0%</div>
    </div>
    <script>
        function progressBar(progressVal,totalPercentageVal = 100) {
            var strokeVal = (4.64 * 100) /  totalPercentageVal;
            var x = document.querySelector('.progress-circle-prog');
            x.style.strokeDasharray = progressVal * (strokeVal) + ' 999';
            var el = document.querySelector('.progress-text');
            var from = $('.progress-text').data('progress');
            $('.progress-text').data('progress', progressVal);
            var start = new Date().getTime();

            setTimeout(function() {
                var now = (new Date().getTime()) - start;
                var progress = now / 700;
                el.innerHTML = progressVal / totalPercentageVal * 100 + '%';
                if (progress < 1) setTimeout(arguments.callee, 10);
            }, 10);

        }

        progressBar(10,200);

    </script>
</apex:page>

Then the html body will load first, then the script tag and then it will show the loading screen as per codepen.

enter image description here

2
  • OMG! YESS that was itt, I was calling the JS before the Styles! Thank you! You saved my life! Aug 11, 2022 at 3:55
  • Just a quick question, how different would this be if I wanted to put all this in a Lightning component instead of an Apex Visual force page? Aug 11, 2022 at 4:14

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .