Take the 2-minute tour ×
Ask Ubuntu is a question and answer site for Ubuntu users and developers. It's 100% free, no registration required.

When Nautilus is loading a folder or searching for a file, there's an animation like this:

Nautilus animation while loading

How can I change it to gnome-spinner (Humanity process-working)? I’ve searched all animation directories in /usr/share/icons/ but couldn’t find any PNG’s for such animation.

Thanks everyone in advance.

share|improve this question
    
If the Icon set you're using does not have the folder animations or spinner it defaults to the Gnome image. By the way the Gnome animation is the same as the Humanity animation which is the same as your image. –  Uri Herrera Feb 5 '13 at 4:31
    
There are animations, but all different from that image I’ve posted. And also Humanity animation is very different. Now do you mean if I create a folder “animation” in gnome folder of icons, I will be able to change this animation? –  AliNa Feb 5 '13 at 22:28
    
This spinner can be for GTK-3.0, can’t it? Because Ubuntu Software Center uses similar spinner and I’ve found some lines in gtk-3.0 widgets CSS for spinner. –  AliNa Feb 6 '13 at 13:29

1 Answer 1

the spinner in nautilus should be from gtk3, u can set it in your current themes gtk3 file, for me its /usr/share/themes/KILLMINT/gtk-3.0/gtk-widgets.css open it and search for string spinner u will find something like this related to spinner

/***********
* spinner *
***********/
.menu.spinner,
.primary-toolbar .spinner,
.primary-toolbar .spinner {
color: @theme_selected_bg_color;
}

.spinner:active {
 transition: 750ms linear loop;
}

and try to look to other themes or distros how their spinner looks like and take the code of it (+check which engine it uses like engine=none; or engine=unico; and whether are some functions of that engine used in code of the spinner)

try code of spinner from zorin:

/***********
* spinner *
***********/
@keyframes spinner {
0.00% { background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(currentColor), to(transparent)),
                          -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.875)), to(transparent)),
                          -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.750)), to(transparent)),
                          -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.625)), to(transparent)),
                          -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.500)), to(transparent)),
                          -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.375)), to(transparent)),
                          -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.250)), to(transparent)),
                          -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.125)), to(transparent)); }

12.5% { background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.875)), to(transparent)),
                          -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.750)), to(transparent)),
                          -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.625)), to(transparent)),
                          -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.500)), to(transparent)),
                          -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.375)), to(transparent)),
                          -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.250)), to(transparent)),
                          -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.125)), to(transparent)),
                          -gtk-gradient(radial, center center, 0, center center, 0.5, to(currentColor), to(transparent)); }

25.0% { background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.750)), to(transparent)),
                          -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.625)), to(transparent)),
                          -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.500)), to(transparent)),
                          -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.375)), to(transparent)),
                          -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.250)), to(transparent)),
                          -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.125)), to(transparent)),
                          -gtk-gradient(radial, center center, 0, center center, 0.5, to(currentColor), to(transparent)),
                          -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.875)), to(transparent)); }

37.5% { background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.625)), to(transparent)),
                          -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.500)), to(transparent)),
                          -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.375)), to(transparent)),
                          -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.250)), to(transparent)),
                          -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.125)), to(transparent)),
                          -gtk-gradient(radial, center center, 0, center center, 0.5, to(currentColor), to(transparent)),
                          -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.875)), to(transparent)),
                          -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.750)), to(transparent)); }

50.0% { background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.500)), to(transparent)),
                          -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.375)), to(transparent)),
                          -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.250)), to(transparent)),
                          -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.125)), to(transparent)),
                          -gtk-gradient(radial, center center, 0, center center, 0.5, to(currentColor), to(transparent)),
                          -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.875)), to(transparent)),
                          -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.750)), to(transparent)),
                          -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.625)), to(transparent)); }

62.5% { background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.375)), to(transparent)),
                          -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.250)), to(transparent)),
                          -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.125)), to(transparent)),
                          -gtk-gradient(radial, center center, 0, center center, 0.5, to(currentColor), to(transparent)),
                          -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.875)), to(transparent)),
                          -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.750)), to(transparent)),
                          -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.625)), to(transparent)),
                          -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.500)), to(transparent)); }

75.0% { background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.250)), to(transparent)),
                          -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.125)), to(transparent)),
                          -gtk-gradient(radial, center center, 0, center center, 0.5, to(currentColor), to(transparent)),
                          -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.875)), to(transparent)),
                          -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.750)), to(transparent)),
                          -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.625)), to(transparent)),
                          -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.500)), to(transparent)),
                          -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.375)), to(transparent)); }

87.5% { background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.125)), to(transparent)),
                          -gtk-gradient(radial, center center, 0, center center, 0.5, to(currentColor), to(transparent)),
                          -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.875)), to(transparent)),
                          -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.750)), to(transparent)),
                          -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.625)), to(transparent)),
                          -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.500)), to(transparent)),
                          -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.375)), to(transparent)),
                          -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.250)), to(transparent)); }

100%  { background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(currentColor), to(transparent)),
                          -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.875)), to(transparent)),
                          -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.750)), to(transparent)),
                          -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.625)), to(transparent)),
                          -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.500)), to(transparent)),
                          -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.375)), to(transparent)),
                          -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.250)), to(transparent)),
                          -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.125)), to(transparent)); }
}

.spinner {
background-color: transparent;
background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(currentColor), to(transparent)),
                  -gtk-gradient(radial, center center, 0, center center, 0.5, to(currentColor), to(transparent)),
                  -gtk-gradient(radial, center center, 0, center center, 0.5, to(currentColor), to(transparent)),
                  -gtk-gradient(radial, center center, 0, center center, 0.5, to(currentColor), to(transparent)),
                  -gtk-gradient(radial, center center, 0, center center, 0.5, to(currentColor), to(transparent)),
                  -gtk-gradient(radial, center center, 0, center center, 0.5, to(currentColor), to(transparent)),
                  -gtk-gradient(radial, center center, 0, center center, 0.5, to(currentColor), to(transparent)),
                  -gtk-gradient(radial, center center, 0, center center, 0.5, to(currentColor), to(transparent));
background-position: 14% 14%, 0% 50%, 14% 86%, 50% 100%, 86% 86%, 100% 50%, 86% 14%, 50% 0%;
background-size: 20% 20%;
background-repeat: no-repeat;
}

.menu.spinner,
.primary-toolbar .spinner,
.primary-toolbar .spinner {
color: @selected_bg_color;
}

.spinner:active {
animation: spinner 1s infinite linear;
}

this will make your spinner look like made of circles, i would post a screenshot, but dont have some points(ill add em) however gtk2 spinner will reamin the same as i didnt find how to config it, looks hard-coded somewhere but your nautilus will use those from gtk3 as my nemo does, so it shouldnt be that bad.. :D cheers KiLLA

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.