From d685baf4786f76744f47239771807436b4847428 Mon Sep 17 00:00:00 2001
From: Frances Botsford <frances@edx.org>
Date: Tue, 18 Mar 2014 17:11:51 -0400
Subject: [PATCH] added loading pattern to studio

---
 cms/templates/ux/reference/container.html |  5 +++++
 common/static/sass/_mixins.scss           | 18 ++++++++++++++++++
 2 files changed, 23 insertions(+)

diff --git a/cms/templates/ux/reference/container.html b/cms/templates/ux/reference/container.html
index bdbf0ec501..ae2a636dbf 100644
--- a/cms/templates/ux/reference/container.html
+++ b/cms/templates/ux/reference/container.html
@@ -35,6 +35,11 @@ from django.core.urlresolvers import reverse
     <div class="inner-wrapper">
         <section class="content-area">
             <article class="content-primary">
+
+            <div class="ui-loading">
+                <p><span class="spin"><i class="icon-refresh"></i></span> <span class="copy">Loading...</span></p>
+            </div>
+
                 <section class="wrapper-xblock level-page">
                     <header class="xblock-header">
                         <div class="header-details">
diff --git a/common/static/sass/_mixins.scss b/common/static/sass/_mixins.scss
index c5cb72f555..c28a780415 100644
--- a/common/static/sass/_mixins.scss
+++ b/common/static/sass/_mixins.scss
@@ -265,6 +265,24 @@
   padding: ($baseline*0.75) $baseline;
 }
 
+.ui-loading {
+  @include animation(fadeIn $tmg-f2 linear 1);
+  @extend %ui-well;
+  opacity: .6;
+  background-color: $white;
+  padding: ($baseline*1.5) $baseline;
+  text-align: center;
+
+  .spin {
+    @extend %anim-rotateCW;
+    display: inline-block;
+  }
+
+  .copy {
+    padding-left: ($baseline/4);
+  }
+}
+
 // ====================
 
 // extends - content - removes list styling/spacing when using uls, ols for navigation and less content-centric cases