Loading Progress Bar of PACE library

Tips submitted by PHPMaker users
Post Reply
kirondedshem
User
Posts: 642

Loading Progress Bar of PACE library

Post by kirondedshem »

I noticed a pace library implemented in adminlte template but unfortunately phpmaker does not ship with these libraries so if one wants it you have to implement it yourself.
So for those interested in the loading progress bar, I recommend using this as it just needs 3 lines of code to work.
Advantages
-shows loading progress of a page on page load.
-shows loading progress of any other element on the page eg those that sue ajax calls to render list of autocompletes etc
-has multiple themes and colors to pick from.

  1. download PACE lirary, So I googled "PACE library" and downloaded it from github link as of now its version pace-1.0.2. download and extract a zip into a imilar folder
    after extracting into a folder You should see folders like themes and file pace.js at its root, if you want an example just go to tests folder and see the demo.html file
  2. I create a folder called custom_plugins in root folder and paste the folder called pace-1.0.2 containing the pace extracts.
    3 a. I chose a theme color from theme color folders available from the themes folder eg blue.
    3 b. Following choosen color I choose a theme(css file) for loading themes available in the color folder eg pace-theme-flash.css
    3 c. Go to page_head of your project and put this line to indicte theme.NOTICE the path of file and change it to your correct one in reference to your root path
    <link rel="stylesheet" href="custom_plugins/pace-1.0.2/themes/blue/pace-theme-flash.css" />
  3. After choosing a theme I import the pace library itself.Go to the page_head and then put. NOTICE the path of file and change it to your correct one in reference to your root path
    <script src="custom_plugins/pace-1.0.2/pace.js"></script>
  4. Then go to page_foot event and initialise the library.put this line
    <script>
    $(document).ajaxStart(function() { Pace.restart(); });
    </script>

Thats all your pge should now show progress for everytime its loading as well as all controlls that make ajax calls.

IMPORTANT HINT:You can change the pace-theme-flash.css to any other css file in the same folder eg pace-theme-big-counter.css to see how other progress themes look and choose one you like.

HINT 2:you can read more about it on there site to know how to fine tune it more, coz what am showing you is just the basic implimentation


kirondedshem
User
Posts: 642

Post by kirondedshem »

I have only used it in phpmaker 2018 version applications since Admin Lte's example is what inspired me to use it, I have like 5 applications in 2018 using this library, so I can confirm it works.

YOu've probably missed something small, coz it only need like 3 lines of code to impliment it. So just check any of these issues

-check for javascript errors in console log, coz it might be that you did not reference the path of the pace maker libraries very well and files cant be loaded.
-you did not initialise the pace library in page_head as indicated.

  • you didnt download the correct library, just follow the these links "github.hubspot.com/pace/" OR "github.com/HubSpot/PACE" and download the zip, it should look like how i explained in first post
  • in rare cases, you did not regenerate all files

NOTE: it should also be able to work for other lower versions of phpmaker applications since its a custom library all it needs is client language so it can be used in any web application irrespective


Post Reply