wpDiscuz - WordPress Comment Plugin
Share:
Notifications
Clear all

[Solved] How to enable loading animation?


deewinc
Posts: 32
Topic starter
(@deewinc)
Eminent Member
Joined: 2 months ago

Hello, 

The loading animation isn't showing. Is there any way I can force it using CSS? 

Regards

6 Replies
deewinc
Posts: 32
Topic starter
(@deewinc)
Eminent Member
Joined: 2 months ago

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;
}
Reply
1 Reply
Asti
 Asti
Support
(@asti)
Joined: 3 years ago

Support member
Posts: 2144

@deewinc,

It's a gif animation. You can change the background-image value.

image
Reply
deewinc
Posts: 32
Topic starter
(@deewinc)
Eminent Member
Joined: 2 months ago

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

Reply
deewinc
Posts: 32
Topic starter
(@deewinc)
Eminent Member
Joined: 2 months ago

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?

Reply
deewinc
Posts: 32
Topic starter
(@deewinc)
Eminent Member
Joined: 2 months ago

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%)
}

Reply
deewinc
Posts: 32
Topic starter
(@deewinc)
Eminent Member
Joined: 2 months ago

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%)
}
Reply
Share: