[Solved] How To Move Animated Gif and to middle of screen when comments are loading?

@ronnie-tanner,

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?

@ronnie-tanner,

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

@ronnie-tanner,

The code works fine. Please leave a screenshot of the code where it is added. I need to see if everything is added correctly. 

@ronnie-tanner,

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

@ronnie-tanner,

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.