It's now working after obtaining some code from one of the threads in the forums. I guess the cache plugin changed the z-index pushing it behind the menu bar. 

It's working perfect now displaying on the top of the comments section using this code. 

Is there a way to change the color of the animation to something else? It's grey in color. I'd love to give it the website's theme color.

div#wpdiscuz-loading-bar {
   top: 50% !important;
   left:50% !important;
}

Found on the forums on a way to change it. This one works perfect so that any plugin updates won't replace the animation. 

https://wpdiscuz.com/community/troubleshooting/loading-bar-change-size-color-and-icon/#post-4971

One more thing. When repositioning the loading animation, it appears slightly more to the left side of the screen on mobile devices and tablets. It only remains at the center on PCs. 

Is there a special rule that we can apply to ensure that the amination horizontally remains at the center in all devices?

Just found a solution to make the display animation perfectly align center on all devices. 

We have to transform the left align (Left: 50% !important;) by 50%

The final results will look like this. The width and height have to be included and must match the dimension of the animation/image. The fonts in bold is what we include to the original code as provided by the user here:> https://wpdiscuz.com/community/troubleshooting/loading-bar-change-size-color-and-icon/#post-4971

#wpdiscuz-loading-bar {
top: 50% !important;
left: 50%;
width:64px;
height:64px;
background-image: url(/wp-content/uploads/2021/01/wp-discuz-preloader.gif );
margin-right: -50%;
transform: translate(-50%, -50%)
}

EDIT

There's no need for the "margin-right: -50%" parameter

#wpdiscuz-loading-bar {
top: 50% !important;
left: 50%;
width:64px;
height:64px;
background-image: url(/wp-content/uploads/2021/01/wp-discuz-preloader.gif );
transform: translate(-50%, -50%)
}