[gtk+/wip/css: 36/36] css: Add a spinner animation to the default theme

[Benjamin Otte <otte src gnome org>]

commit 5e9f05be097477c40e0d91045908fb64c10fc503
Author: Benjamin Otte <otte redhat com>
Date:   Mon Sep 17 13:41:18 2012 +0200

    css: Add a spinner animation to the default theme

 gtk/gtk-default.css |   64 +++++++++++++++++++++++++++++++++++++++++++++++++++
 1 files changed, 64 insertions(+), 0 deletions(-)
---
diff --git a/gtk/gtk-default.css b/gtk/gtk-default.css
index 266549b..b17e22d 100644
--- a/gtk/gtk-default.css
+++ b/gtk/gtk-default.css
@@ -378,3 +378,67 @@ GtkCalendar.button:hover {
   border-width: 0;
   padding: 2px;
 }
+
+ keyframes spinner {
+  0% { background-position: 50.00% 0.00%, 85.36% 14.64%, 100.00% 50.00%, 85.36% 85.36%, 50.00% 100.00%, 14.64% 85.36%, 0.00% 50.00%, 14.64% 14.64%; }
+  3.125% { background-position: 59.75% 0.96%, 91.57% 22.22%, 99.04% 59.75%, 77.78% 91.57%, 40.25% 99.04%, 8.43% 77.78%, 0.96% 40.25%, 22.22% 8.43%; }
+  6.25% { background-position: 69.13% 3.81%, 96.19% 30.87%, 96.19% 69.13%, 69.13% 96.19%, 30.87% 96.19%, 3.81% 69.13%, 3.81% 30.87%, 30.87% 3.81%; }
+  9.375% { background-position: 77.78% 8.43%, 99.04% 40.25%, 91.57% 77.78%, 59.75% 99.04%, 22.22% 91.57%, 0.96% 59.75%, 8.43% 22.22%, 40.25% 0.96%; }
+  12.5% { background-position: 85.36% 14.64%, 100.00% 50.00%, 85.36% 85.36%, 50.00% 100.00%, 14.64% 85.36%, 0.00% 50.00%, 14.64% 14.64%, 50.00% 0.00%; }
+  15.625% { background-position: 91.57% 22.22%, 99.04% 59.75%, 77.78% 91.57%, 40.25% 99.04%, 8.43% 77.78%, 0.96% 40.25%, 22.22% 8.43%, 59.75% 0.96%; }
+  18.75% { background-position: 96.19% 30.87%, 96.19% 69.13%, 69.13% 96.19%, 30.87% 96.19%, 3.81% 69.13%, 3.81% 30.87%, 30.87% 3.81%, 69.13% 3.81%; }
+  21.875% { background-position: 99.04% 40.25%, 91.57% 77.78%, 59.75% 99.04%, 22.22% 91.57%, 0.96% 59.75%, 8.43% 22.22%, 40.25% 0.96%, 77.78% 8.43%; }
+  25% { background-position: 100.00% 50.00%, 85.36% 85.36%, 50.00% 100.00%, 14.64% 85.36%, 0.00% 50.00%, 14.64% 14.64%, 50.00% 0.00%, 85.36% 14.64%; }
+  28.125% { background-position: 99.04% 59.75%, 77.78% 91.57%, 40.25% 99.04%, 8.43% 77.78%, 0.96% 40.25%, 22.22% 8.43%, 59.75% 0.96%, 91.57% 22.22%; }
+  31.25% { background-position: 96.19% 69.13%, 69.13% 96.19%, 30.87% 96.19%, 3.81% 69.13%, 3.81% 30.87%, 30.87% 3.81%, 69.13% 3.81%, 96.19% 30.87%; }
+  34.375% { background-position: 91.57% 77.78%, 59.75% 99.04%, 22.22% 91.57%, 0.96% 59.75%, 8.43% 22.22%, 40.25% 0.96%, 77.78% 8.43%, 99.04% 40.25%; }
+  37.5% { background-position: 85.36% 85.36%, 50.00% 100.00%, 14.64% 85.36%, 0.00% 50.00%, 14.64% 14.64%, 50.00% 0.00%, 85.36% 14.64%, 100.00% 50.00%; }
+  40.625% { background-position: 77.78% 91.57%, 40.25% 99.04%, 8.43% 77.78%, 0.96% 40.25%, 22.22% 8.43%, 59.75% 0.96%, 91.57% 22.22%, 99.04% 59.75%; }
+  43.75% { background-position: 69.13% 96.19%, 30.87% 96.19%, 3.81% 69.13%, 3.81% 30.87%, 30.87% 3.81%, 69.13% 3.81%, 96.19% 30.87%, 96.19% 69.13%; }
+  46.875% { background-position: 59.75% 99.04%, 22.22% 91.57%, 0.96% 59.75%, 8.43% 22.22%, 40.25% 0.96%, 77.78% 8.43%, 99.04% 40.25%, 91.57% 77.78%; }
+  50% { background-position: 50.00% 100.00%, 14.64% 85.36%, 0.00% 50.00%, 14.64% 14.64%, 50.00% 0.00%, 85.36% 14.64%, 100.00% 50.00%, 85.36% 85.36%; }
+  53.125% { background-position: 40.25% 99.04%, 8.43% 77.78%, 0.96% 40.25%, 22.22% 8.43%, 59.75% 0.96%, 91.57% 22.22%, 99.04% 59.75%, 77.78% 91.57%; }
+  56.25% { background-position: 30.87% 96.19%, 3.81% 69.13%, 3.81% 30.87%, 30.87% 3.81%, 69.13% 3.81%, 96.19% 30.87%, 96.19% 69.13%, 69.13% 96.19%; }
+  59.375% { background-position: 22.22% 91.57%, 0.96% 59.75%, 8.43% 22.22%, 40.25% 0.96%, 77.78% 8.43%, 99.04% 40.25%, 91.57% 77.78%, 59.75% 99.04%; }
+  62.5% { background-position: 14.64% 85.36%, 0.00% 50.00%, 14.64% 14.64%, 50.00% 0.00%, 85.36% 14.64%, 100.00% 50.00%, 85.36% 85.36%, 50.00% 100.00%; }
+  65.625% { background-position: 8.43% 77.78%, 0.96% 40.25%, 22.22% 8.43%, 59.75% 0.96%, 91.57% 22.22%, 99.04% 59.75%, 77.78% 91.57%, 40.25% 99.04%; }
+  68.75% { background-position: 3.81% 69.13%, 3.81% 30.87%, 30.87% 3.81%, 69.13% 3.81%, 96.19% 30.87%, 96.19% 69.13%, 69.13% 96.19%, 30.87% 96.19%; }
+  71.875% { background-position: 0.96% 59.75%, 8.43% 22.22%, 40.25% 0.96%, 77.78% 8.43%, 99.04% 40.25%, 91.57% 77.78%, 59.75% 99.04%, 22.22% 91.57%; }
+  75% { background-position: 0.00% 50.00%, 14.64% 14.64%, 50.00% 0.00%, 85.36% 14.64%, 100.00% 50.00%, 85.36% 85.36%, 50.00% 100.00%, 14.64% 85.36%; }
+  78.125% { background-position: 0.96% 40.25%, 22.22% 8.43%, 59.75% 0.96%, 91.57% 22.22%, 99.04% 59.75%, 77.78% 91.57%, 40.25% 99.04%, 8.43% 77.78%; }
+  81.25% { background-position: 3.81% 30.87%, 30.87% 3.81%, 69.13% 3.81%, 96.19% 30.87%, 96.19% 69.13%, 69.13% 96.19%, 30.87% 96.19%, 3.81% 69.13%; }
+  84.375% { background-position: 8.43% 22.22%, 40.25% 0.96%, 77.78% 8.43%, 99.04% 40.25%, 91.57% 77.78%, 59.75% 99.04%, 22.22% 91.57%, 0.96% 59.75%; }
+  87.5% { background-position: 14.64% 14.64%, 50.00% 0.00%, 85.36% 14.64%, 100.00% 50.00%, 85.36% 85.36%, 50.00% 100.00%, 14.64% 85.36%, 0.00% 50.00%; }
+  90.625% { background-position: 22.22% 8.43%, 59.75% 0.96%, 91.57% 22.22%, 99.04% 59.75%, 77.78% 91.57%, 40.25% 99.04%, 8.43% 77.78%, 0.96% 40.25%; }
+  93.75% { background-position: 30.87% 3.81%, 69.13% 3.81%, 96.19% 30.87%, 96.19% 69.13%, 69.13% 96.19%, 30.87% 96.19%, 3.81% 69.13%, 3.81% 30.87%; }
+  96.875% { background-position: 40.25% 0.96%, 77.78% 8.43%, 99.04% 40.25%, 91.57% 77.78%, 59.75% 99.04%, 22.22% 91.57%, 0.96% 59.75%, 8.43% 22.22%; }
+  100% { background-position: 50.00% 0.00%, 85.36% 14.64%, 100.00% 50.00%, 85.36% 85.36%, 50.00% 100.00%, 14.64% 85.36%, 0.00% 50.00%, 14.64% 14.64%; }
+}
+
+.spinner {
+  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: 50.00% 0.00%, 85.36% 14.64%, 100.00% 50.00%, 85.36% 85.36%, 50.00% 100.00%, 14.64% 85.36%, 0.00% 50.00%, 14.64% 14.64%;
+  background-size: 20% 20%;
+  background-repeat: no-repeat;
+  transition: background 1s linear;
+}
+
+.spinner:active {
+  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.5)), to(transparent)),
+                    -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor,0.5714)), to(transparent)),
+                    -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor,0.6429)), to(transparent)),
+                    -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor,0.7143)), to(transparent)),
+                    -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor,0.7857)), to(transparent)),
+                    -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor,0.8571)), to(transparent)),
+                    -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor,0.9286)), to(transparent));
+  animation: spinner 1s infinite linear;
+  background-size: 25% 25%, 7.5% 7.5%, 10% 10%, 12.5% 12.5%, 15% 15%, 17.5% 17.5%, 20% 20%, 22.5% 22.5%;
+}