From c8bf389b6ff0b7ef336ec871bfaa7346a61aa870 Mon Sep 17 00:00:00 2001
From: Joao Moreno <jomo@microsoft.com>
Date: Mon, 12 Sep 2016 16:42:12 +0200
Subject: [PATCH] use css animations for loading icons

fixes #11302
---
 .../base/parts/tree/browser/loading-dark.svg  | 50 +++++++++---------
 src/vs/base/parts/tree/browser/loading-hc.svg | 52 ++++++++++---------
 src/vs/base/parts/tree/browser/loading.svg    | 50 +++++++++---------
 3 files changed, 79 insertions(+), 73 deletions(-)

diff --git a/src/vs/base/parts/tree/browser/loading-dark.svg b/src/vs/base/parts/tree/browser/loading-dark.svg
index ba959a31e86..7dc1ebd8cf0 100644
--- a/src/vs/base/parts/tree/browser/loading-dark.svg
+++ b/src/vs/base/parts/tree/browser/loading-dark.svg
@@ -1,29 +1,31 @@
 <?xml version='1.0' standalone='no' ?>
 <svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='10px' height='10px'>
+	<style>
+    circle {
+      animation: ball 0.6s linear infinite;
+    }
+
+    circle:nth-child(2) { animation-delay: 0.075s; }
+    circle:nth-child(3) { animation-delay: 0.15s; }
+    circle:nth-child(4) { animation-delay: 0.225s; }
+    circle:nth-child(5) { animation-delay: 0.3s; }
+    circle:nth-child(6) { animation-delay: 0.375s; }
+    circle:nth-child(7) { animation-delay: 0.45s; }
+    circle:nth-child(8) { animation-delay: 0.525s; }
+
+    @keyframes ball {
+      from { opacity: 1; }
+      to { opacity: 0.3; }
+    }
+	</style>
 	<g style="fill:grey;">
-		<circle cx='5' cy='1' r='1' style='opacity:0.3;'>
-			<animate attributeType='CSS' attributeName='opacity' from='1' to='0.3' dur='0.6s' repeatCount='indefinite' begin='0s' />
-		</circle>
-		<circle cx='7.8284' cy='2.1716' r='1' style='opacity:0.3;'>
-			<animate attributeType='CSS' attributeName='opacity' from='1' to='0.3' dur='0.6s' repeatCount='indefinite' begin='0.075s' />
-		</circle>
-		<circle cx='9' cy='5' r='1' style='opacity:0.3;'>
-			<animate attributeType='CSS' attributeName='opacity' from='1' to='0.3' dur='0.6s' repeatCount='indefinite' begin='0.15s' />
-		</circle>
-		<circle cx='7.8284' cy='7.8284' r='1' style='opacity:0.3;'>
-			<animate attributeType='CSS' attributeName='opacity' from='1' to='0.3' dur='0.6s' repeatCount='indefinite' begin='0.225s' />
-		</circle>
-		<circle cx='5' cy='9' r='1' style='opacity:0.3;'>
-			<animate attributeType='CSS' attributeName='opacity' from='1' to='0.3' dur='0.6s' repeatCount='indefinite' begin='0.3s' />
-		</circle>
-		<circle cx='2.1716' cy='7.8284' r='1' style='opacity:0.3;'>
-			<animate attributeType='CSS' attributeName='opacity' from='1' to='0.3' dur='0.6s' repeatCount='indefinite' begin='0.375s' />
-		</circle>
-		<circle cx='1' cy='5' r='1' style='opacity:0.3;'>
-			<animate attributeType='CSS' attributeName='opacity' from='1' to='0.3' dur='0.6s' repeatCount='indefinite' begin='0.45s' />
-		</circle>
-		<circle cx='2.1716' cy='2.1716' r='1' style='opacity:0.3;'>
-			<animate attributeType='CSS' attributeName='opacity' from='1' to='0.3' dur='0.6s' repeatCount='indefinite' begin='0.525s' />
-		</circle>
+		<circle cx='5' cy='1' r='1' style='opacity:0.3;' />
+		<circle cx='7.8284' cy='2.1716' r='1' style='opacity:0.3;' />
+		<circle cx='9' cy='5' r='1' style='opacity:0.3;' />
+		<circle cx='7.8284' cy='7.8284' r='1' style='opacity:0.3;' />
+		<circle cx='5' cy='9' r='1' style='opacity:0.3;' />
+		<circle cx='2.1716' cy='7.8284' r='1' style='opacity:0.3;' />
+		<circle cx='1' cy='5' r='1' style='opacity:0.3;' />
+		<circle cx='2.1716' cy='2.1716' r='1' style='opacity:0.3;' />
 	</g>
 </svg>
diff --git a/src/vs/base/parts/tree/browser/loading-hc.svg b/src/vs/base/parts/tree/browser/loading-hc.svg
index 9d4fa14a907..c3633c0ddab 100644
--- a/src/vs/base/parts/tree/browser/loading-hc.svg
+++ b/src/vs/base/parts/tree/browser/loading-hc.svg
@@ -1,29 +1,31 @@
 <?xml version='1.0' standalone='no' ?>
 <svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='10px' height='10px'>
-	<g style="fill:#fff;">
-		<circle cx='5' cy='1' r='1' style='opacity:0.3;'>
-			<animate attributeType='CSS' attributeName='opacity' from='1' to='0.3' dur='0.6s' repeatCount='indefinite' begin='0s' />
-		</circle>
-		<circle cx='7.8284' cy='2.1716' r='1' style='opacity:0.3;'>
-			<animate attributeType='CSS' attributeName='opacity' from='1' to='0.3' dur='0.6s' repeatCount='indefinite' begin='0.075s' />
-		</circle>
-		<circle cx='9' cy='5' r='1' style='opacity:0.3;'>
-			<animate attributeType='CSS' attributeName='opacity' from='1' to='0.3' dur='0.6s' repeatCount='indefinite' begin='0.15s' />
-		</circle>
-		<circle cx='7.8284' cy='7.8284' r='1' style='opacity:0.3;'>
-			<animate attributeType='CSS' attributeName='opacity' from='1' to='0.3' dur='0.6s' repeatCount='indefinite' begin='0.225s' />
-		</circle>
-		<circle cx='5' cy='9' r='1' style='opacity:0.3;'>
-			<animate attributeType='CSS' attributeName='opacity' from='1' to='0.3' dur='0.6s' repeatCount='indefinite' begin='0.3s' />
-		</circle>
-		<circle cx='2.1716' cy='7.8284' r='1' style='opacity:0.3;'>
-			<animate attributeType='CSS' attributeName='opacity' from='1' to='0.3' dur='0.6s' repeatCount='indefinite' begin='0.375s' />
-		</circle>
-		<circle cx='1' cy='5' r='1' style='opacity:0.3;'>
-			<animate attributeType='CSS' attributeName='opacity' from='1' to='0.3' dur='0.6s' repeatCount='indefinite' begin='0.45s' />
-		</circle>
-		<circle cx='2.1716' cy='2.1716' r='1' style='opacity:0.3;'>
-			<animate attributeType='CSS' attributeName='opacity' from='1' to='0.3' dur='0.6s' repeatCount='indefinite' begin='0.525s' />
-		</circle>
+	<style>
+    circle {
+      animation: ball 0.6s linear infinite;
+    }
+
+    circle:nth-child(2) { animation-delay: 0.075s; }
+    circle:nth-child(3) { animation-delay: 0.15s; }
+    circle:nth-child(4) { animation-delay: 0.225s; }
+    circle:nth-child(5) { animation-delay: 0.3s; }
+    circle:nth-child(6) { animation-delay: 0.375s; }
+    circle:nth-child(7) { animation-delay: 0.45s; }
+    circle:nth-child(8) { animation-delay: 0.525s; }
+
+    @keyframes ball {
+      from { opacity: 1; }
+      to { opacity: 0.3; }
+    }
+	</style>
+	<g style="fill:white;">
+		<circle cx='5' cy='1' r='1' style='opacity:0.3;' />
+		<circle cx='7.8284' cy='2.1716' r='1' style='opacity:0.3;' />
+		<circle cx='9' cy='5' r='1' style='opacity:0.3;' />
+		<circle cx='7.8284' cy='7.8284' r='1' style='opacity:0.3;' />
+		<circle cx='5' cy='9' r='1' style='opacity:0.3;' />
+		<circle cx='2.1716' cy='7.8284' r='1' style='opacity:0.3;' />
+		<circle cx='1' cy='5' r='1' style='opacity:0.3;' />
+		<circle cx='2.1716' cy='2.1716' r='1' style='opacity:0.3;' />
 	</g>
 </svg>
diff --git a/src/vs/base/parts/tree/browser/loading.svg b/src/vs/base/parts/tree/browser/loading.svg
index 83a496980a0..e762f06d5e6 100644
--- a/src/vs/base/parts/tree/browser/loading.svg
+++ b/src/vs/base/parts/tree/browser/loading.svg
@@ -1,29 +1,31 @@
 <?xml version='1.0' standalone='no' ?>
 <svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='10px' height='10px'>
+	<style>
+    circle {
+      animation: ball 0.6s linear infinite;
+    }
+
+    circle:nth-child(2) { animation-delay: 0.075s; }
+    circle:nth-child(3) { animation-delay: 0.15s; }
+    circle:nth-child(4) { animation-delay: 0.225s; }
+    circle:nth-child(5) { animation-delay: 0.3s; }
+    circle:nth-child(6) { animation-delay: 0.375s; }
+    circle:nth-child(7) { animation-delay: 0.45s; }
+    circle:nth-child(8) { animation-delay: 0.525s; }
+
+    @keyframes ball {
+      from { opacity: 1; }
+      to { opacity: 0.3; }
+    }
+	</style>
 	<g>
-		<circle cx='5' cy='1' r='1' style='opacity:0.3;'>
-			<animate attributeType='CSS' attributeName='opacity' from='1' to='0.3' dur='0.6s' repeatCount='indefinite' begin='0s' />
-		</circle>
-		<circle cx='7.8284' cy='2.1716' r='1' style='opacity:0.3;'>
-			<animate attributeType='CSS' attributeName='opacity' from='1' to='0.3' dur='0.6s' repeatCount='indefinite' begin='0.075s' />
-		</circle>
-		<circle cx='9' cy='5' r='1' style='opacity:0.3;'>
-			<animate attributeType='CSS' attributeName='opacity' from='1' to='0.3' dur='0.6s' repeatCount='indefinite' begin='0.15s' />
-		</circle>
-		<circle cx='7.8284' cy='7.8284' r='1' style='opacity:0.3;'>
-			<animate attributeType='CSS' attributeName='opacity' from='1' to='0.3' dur='0.6s' repeatCount='indefinite' begin='0.225s' />
-		</circle>
-		<circle cx='5' cy='9' r='1' style='opacity:0.3;'>
-			<animate attributeType='CSS' attributeName='opacity' from='1' to='0.3' dur='0.6s' repeatCount='indefinite' begin='0.3s' />
-		</circle>
-		<circle cx='2.1716' cy='7.8284' r='1' style='opacity:0.3;'>
-			<animate attributeType='CSS' attributeName='opacity' from='1' to='0.3' dur='0.6s' repeatCount='indefinite' begin='0.375s' />
-		</circle>
-		<circle cx='1' cy='5' r='1' style='opacity:0.3;'>
-			<animate attributeType='CSS' attributeName='opacity' from='1' to='0.3' dur='0.6s' repeatCount='indefinite' begin='0.45s' />
-		</circle>
-		<circle cx='2.1716' cy='2.1716' r='1' style='opacity:0.3;'>
-			<animate attributeType='CSS' attributeName='opacity' from='1' to='0.3' dur='0.6s' repeatCount='indefinite' begin='0.525s' />
-		</circle>
+		<circle cx='5' cy='1' r='1' style='opacity:0.3;' />
+		<circle cx='7.8284' cy='2.1716' r='1' style='opacity:0.3;' />
+		<circle cx='9' cy='5' r='1' style='opacity:0.3;' />
+		<circle cx='7.8284' cy='7.8284' r='1' style='opacity:0.3;' />
+		<circle cx='5' cy='9' r='1' style='opacity:0.3;' />
+		<circle cx='2.1716' cy='7.8284' r='1' style='opacity:0.3;' />
+		<circle cx='1' cy='5' r='1' style='opacity:0.3;' />
+		<circle cx='2.1716' cy='2.1716' r='1' style='opacity:0.3;' />
 	</g>
 </svg>