Ajax event progress bar

Need Help
#1

Hello,

I have an ajax event “onUpdateCars” which basically loop through cars model and update the record. There are 5k cars which take around 5 - 10 minutes. Besides showing the ajax loading gif or similar in css, it would be great to show the progress in a progress bar.

My question is that how can i accomplish this. Similar funitionality like installing a plugin and you can see the progress bar.

Thanks alot.

P.S: this is for educational purpose and nothing to do with real cars

@daft will ot be possible to put your idea how can i manage this? Thanks in advance

#2

Check this piece of documentation out. It could help: Loading Indicators - October CMS - 3.x

#3

@artistro08 my question is to update the progress bar when the loop is still running. E.g after the 10th loop the progress bar should be at 10% (assuming total loops are 100).

The link you send have static progress bar.

#4

In that case, wouldn’t it be easy to run some JavaScript code via an ajax function to update the progress bar?

You would first need to get the loop length, and store that variable. Then during the loop you’ll need someone math to determine the percentage of the progress based on the loop length

Once you’re done, you can adjust the width of the progress bar via JavaScript.

This way would be choppy, but would work. Id take a look at how October does it in the source code as well to get an idea of a smoother way.

Also, sorry I wasn’t able to help more

#5

@artistro08 thanks alot.

That would definitely work. i am looking for a more october way.

Thanks alot again.

1 Like
#6

Hey @ibrarartisan

This is the CSS that October v2 used for its loading bar. It is a tapering animation.

@keyframes infinite-loader {
    0% { width: 0%; }
    10% { width: 42%; }
    20% { width: 63%; }
    30% { width: 78.75%; }
    40% { width: 88.59375%; }
    50% { width: 94.13085938%; }
    60% { width: 97.07244873%; }
    70% { width: 98.58920574%; }
    80% { width: 99.35943391%; }
    90% { width: 99.7475567%; }
    100% { width: 99.94237615%; }
}

Estimate how long each record takes and multiply it by the number of records, then use inline style to add the calculated amount in seconds.

style="animation: infinite-loader 90s ease-in forwards;"

This is an illusion approach to overcome the inability for PHP to report on its processing status. This is something only websockets or native apps can do by using multithreading. PHP is single threaded for the most part.

I hope this helps.

#7

@daft thanks alot. That’s very helpful