From d5d9481c0f4c1ddd86f2e30f798da50c37f56a3a Mon Sep 17 00:00:00 2001
From: Reed Garmsen <rgarmsen2295@gmail.com>
Date: Tue, 30 Jun 2015 20:01:35 -0700
Subject: [PATCH] Added new files for adding new loading animation

---
 web/react/components/loading_posts.jsx     |  3 +
 web/sass-files/sass/partials/_loading.scss | 68 ++++++++++++++++++++++
 2 files changed, 71 insertions(+)
 create mode 100644 web/react/components/loading_posts.jsx
 create mode 100644 web/sass-files/sass/partials/_loading.scss

diff --git a/web/react/components/loading_posts.jsx b/web/react/components/loading_posts.jsx
new file mode 100644
index 0000000000..f6d8599548
--- /dev/null
+++ b/web/react/components/loading_posts.jsx
@@ -0,0 +1,3 @@
+// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved.
+// See License.txt for license information.
+
diff --git a/web/sass-files/sass/partials/_loading.scss b/web/sass-files/sass/partials/_loading.scss
new file mode 100644
index 0000000000..185a42180d
--- /dev/null
+++ b/web/sass-files/sass/partials/_loading.scss
@@ -0,0 +1,68 @@
+.loading-screen {
+	display: table;
+	width: 100%;
+	height: 100%;
+	position: absolute;
+	@include box-sizing(border-box);
+	text-align: center;
+	.loading__content {
+		display: table-cell;
+		vertical-align: middle;
+		h3 {
+			font-weight: 400;
+			margin: 0 0.2em 0;
+			display: inline-block;
+		}
+	}
+}
+
+.loading-screen {
+	.loading__content {
+		.round {
+			background-color: #444;
+			width: 4px;
+			height: 4px;
+			display: inline-block;
+			margin: 0 1px;
+			opacity: 0.1;
+			@include border-radius(10px);
+			-moz-animation: move 0.75s infinite linear;
+			-webkit-animation: move 0.75s infinite linear;
+		}
+
+		#round_1 {
+			-moz-animation-delay: .2s;
+			-webkit-animation-delay: .2s;
+		}
+
+		#round_2 {
+			-moz-animation-delay: .4s;
+			-webkit-animation-delay: .4s;
+		}
+
+		#round_3 {
+			-moz-animation-delay: .6s;
+			-webkit-animation-delay: .6s;
+		}
+
+		@-moz-keyframes move {
+			0% {
+				opacity: 1;
+			}
+
+			100% {
+				opacity: 0.1;
+			};
+		}
+
+		@-webkit-keyframes move {
+			0% {
+				opacity: 1;
+			}
+
+			100% {
+				opacity: 0.1;
+			};
+		}
+	}
+}