The effects of alcohol on
sustanon 250 leucine for – real weight loss & bodybuilding benefits?
[Solved] Loading Bar (Change Size, Color, and Icon)
How-to and Troubleshooting
(@aerostar)
Estimable Member
Joined: 6 years ago
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!
(@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!
(@asti)
Joined: 8 years ago
Illustrious Member
Posts: 8195
Oct 16, 2020 8:04 am
@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.
(@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!