AI Search

Classic Search

Search Phrase:

Search Type:

Advanced search options

Search in Forums:

Search in date period:

Sort Search Results by:

AI Assistant

Notifications

Clear all

[Solved] Loading Bar (Change Size, Color, and Icon)

✦ Summarize Topic

How-to and Troubleshooting

Last Post by AeroStar 5 years ago

4 Posts

2 Users

1 Reactions

5,966 Views

RSS

Posts: 125

AeroStar

Topic starter

Translate ▼

Oct 15, 2020 8:41 pm

(@aerostar)

Estimable Member

Joined: 6 years ago

[#1200]

Hi there,

Concerning your loading bar, we need to know how to accomplish the following:

Make the loading bar smaller and change its color. The CSS Code identifying the loading bar is: #wpdiscuz-loading-bar { ... }

Change the GIF or Icon used for the loading bar. For example, we'd like to use a small spinning circle and customize its color.

Thank you!

Topic Tags

loading bar customization

3 Replies

Posts: 125

AeroStar

Topic starter

Translate ▼

Oct 15, 2020 10:28 pm

(@aerostar)

Estimable Member

Joined: 6 years ago

Update:

OK, found the answer to our above questions. We're using:

#wpdiscuz-loading-bar
{background-image: url(  https://www.mysite.com/wp-content/uploads/*}

Where the URL can be obtained from our uploaded media (i.e., gif upload) or from a URL that offers GIFs such as https://icons8.com/preloaders/en/horizontal

If I missed anything, please advise. Thank you!

1 Reply

Asti

Support

(@asti)

Joined: 8 years ago

Illustrious Member

Posts: 8208

Oct 16, 2020 12:04 pm

Reply to

AeroStar

Translate ▼

@aerostar,

If you uploaded the animation to your website Media Library, then used the File URL as a value of the background-image, it should work fine. We've just checked it.

In case you want to say thank you! 🙂
We'd really appreciate if you leave a good review on the plugin page.
This is the best way to say thank you to this project and the support team.

Posts: 125

AeroStar

Topic starter

Translate ▼

Oct 16, 2020 4:27 pm

(@aerostar)

Estimable Member

Joined: 6 years ago

@asti,

Yes, that's what we did. Works great. To be specific, CSS code below changes the loading bar icon and position. Please note that, depending on the size of the GIF used, you will need specify the height and width of the GIF to ensure it displays with no overflow.

#wpdiscuz-loading-bar {
top:50%!important;
left:50%!important;
width:90px!important;
height:12px!important;
transform: translate(-50%, -50%);
background-image: url(  https://www.mysite.com/wp-content/uploads/2020/10/comments-loading-bar-blue-90x12-1.gif  );
}

A great site for loading spinners (i.e., gifs, preloaders, etc) can be found here:

https://icons8.com/preloaders/

Cheers!