How To Move Animate...
 
Share:
Notifications
Clear all

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

12 Posts
2 Users
1 Likes
1,136 Views
Posts: 23
Topic starter
(@ronnie-tanner)
Eminent Member
Joined: 2 years ago

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.

Topic Tags
11 Replies
Asti
Posts: 7054
 Asti
Support
(@asti)
Illustrious Member
Joined: 6 years ago

@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.

3 Replies
(@ronnie-tanner)
Joined: 2 years ago

Eminent Member
Posts: 23

@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.

(@ronnie-tanner)
Joined: 2 years ago

Eminent Member
Posts: 23

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?

Asti
 Asti
Support
(@asti)
Joined: 6 years ago

Illustrious Member
Posts: 7054

@ronnie-tanner,

It works fine, please watch this video: https://www.screencast.com/t/YDtLHXW5

Posts: 23
Topic starter
(@ronnie-tanner)
Eminent Member
Joined: 2 years ago

 

comments loading

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

 

6 Replies
Asti
 Asti
Support
(@asti)
Joined: 6 years ago

Illustrious Member
Posts: 7054

@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)
Joined: 2 years ago

Eminent Member
Posts: 23
Asti
 Asti
Support
(@asti)
Joined: 6 years ago

Illustrious Member
Posts: 7054

@ronnie-tanner,

The closed bracket is missing. Please add it as shown in the screenshot below and it'll work fine. 

image
(@ronnie-tanner)
Joined: 2 years ago

Eminent Member
Posts: 23

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

 

 

Asti
 Asti
Support
(@asti)
Joined: 6 years ago

Illustrious Member
Posts: 7054

@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. 

(@ronnie-tanner)
Joined: 2 years ago

Eminent Member
Posts: 23

@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.

Share: