Is there an option to move the animated gif / progress indicator image from the top right to the middle of the screen, and change it to say something like "Comments are loading...."?
The reason is user's sometimes can't see the small image in the top right and think something is wrong. If they wait a few more seconds the cursor advances to the bookmarked comment, but it'd be nice to let them know immediately.
You can use the following CSS code:
#wpdiscuz-loading-bar {
width: 293px !important;
top: 50% !important;
right: 50%;
}
#wpdiscuz-loading-bar:before{
content: "Comments are loading....";
width: 293px !important;
padding: 30px;
display:inline-block;
align-content: center;
}
div#wpdiscuz-loading-bar {
background-repeat: no-repeat;
background-position: 50%;
}
Put the code in the Top Admin Bar > Customize > Additional CSS > "Additional CSS" textarea, save it, delete all caches and check again.
@asti thank you. I've added the code and purged all caches but now I don't see the one in the top right nor the new one.
I can see it for a brief moment on this link:
https://www.thepathoftruth.com/teachings/wrath-of-god.htm#comment-60093
Perhaps there is something on our website end that also causes the delay for the scroll to bookmark to begin?
It works fine, please watch this video: https://www.screencast.com/t/YDtLHXW5
Hello! You all gave me instructions a while back to move the progress indicator.
I've recently updated my CSS to load an animated GIF (See attached).
1) What I'd like to do is remove the text "Comments are loading" or at least change it to something that applies to all situations. How can I do that? I see CSS that is in the plugin:
#wpdiscuz-loading-bar:before{
content: "Comments are loading....";
width: 293px !important;
padding: 30px;
display:inline-block;
align-content: center;
However, if I add this code in the "Additional CSS" and change the text it doesn't actually change anything even after refreshing, purging caches. Am I missing something here?
Thank you
The code works fine. Please leave a screenshot of the code where it is added. I need to see if everything is added correctly.
The closed bracket is missing. Please add it as shown in the screenshot below and it'll work fine.
@asti I must be missing something else. This is what's in my CSS now. And here is a sample link: https://www.thepathoftruth.com/falsehood-exposed/diabolical-doctrines/trinity.htm#comment-63669
.comments-area{width:auto;}
.wpd-view-replies span{color: red;font-size:18px;cursor:pointer;}
#wpdiscuz-loading-bar:before{
content: "";
width: 293px !important;
padding: 30px;
display:inline-block;
align-content: center;
}
#wpdiscuz-loading-bar {
content:"";
width:64px;
height:64px;
top:50%!important;
left:50%!important;
margin-right: -50%;
transform: translate(-50%, -50%);
background-image: url(/wp-content/uploads/2023/04/spinner3-1.gif);
}
You've added the CSS code in another place as well. Please watch this video: https://www.screencast.com/t/RjkaO6KxTGJx
Please either remove the code previously added or add the !important statement to the content: ""; CSS rule.
@asti thank you, that did it. I'm not sure where I put the other instance but I added the "!important" tag and it fixed it.
