diff --git a/public/app/features/explore/Panel.tsx b/public/app/features/explore/Panel.tsx
index 093bcd9c711..dc75cb0ecca 100644
--- a/public/app/features/explore/Panel.tsx
+++ b/public/app/features/explore/Panel.tsx
@@ -13,6 +13,7 @@ export default class Panel extends PureComponent<Props> {
   render() {
     const { isOpen, loading } = this.props;
     const iconClass = isOpen ? 'fa fa-caret-up' : 'fa fa-caret-down';
+    const loaderClass = loading ? 'explore-panel__loader explore-panel__loader--active' : 'explore-panel__loader';
     return (
       <div className="explore-panel panel-container">
         <div className="explore-panel__header" onClick={this.onClickToggle}>
@@ -23,11 +24,7 @@ export default class Panel extends PureComponent<Props> {
         </div>
         {isOpen && (
           <div className="explore-panel__body">
-            {loading && (
-              <span className="panel-loading">
-                <i className="fa fa-spinner fa-spin" />
-              </span>
-            )}
+            <div className={loaderClass} />
             {this.props.children}
           </div>
         )}
diff --git a/public/sass/pages/_dashboard.scss b/public/sass/pages/_dashboard.scss
index d04e11f8a2b..a0ff9fd877c 100644
--- a/public/sass/pages/_dashboard.scss
+++ b/public/sass/pages/_dashboard.scss
@@ -144,8 +144,8 @@ div.flot-text {
 
 .panel-loading {
   position: absolute;
-  top: 0;
-  right: 3px;
+  top: -3px;
+  right: 0px;
   z-index: 800;
   font-size: $font-size-sm;
   color: $text-color-weak;
diff --git a/public/sass/pages/_explore.scss b/public/sass/pages/_explore.scss
index b99200ae031..abd13a10368 100644
--- a/public/sass/pages/_explore.scss
+++ b/public/sass/pages/_explore.scss
@@ -112,6 +112,40 @@
     flex-wrap: wrap;
   }
 
+  .explore-panel__loader {
+    height: 2px;
+    position: relative;
+    overflow: hidden;
+    background: none;
+    margin: $panel-margin / 2;
+    transition: background-color 1s ease;
+  }
+
+  .explore-panel__loader--active {
+    background: $text-color-faint;
+  }
+
+  .explore-panel__loader--active:after {
+    content: ' ';
+    display: block;
+    width: 25%;
+    top: 0;
+    top: -50%;
+    height: 250%;
+    position: absolute;
+    animation: loader 2s cubic-bezier(0.17, 0.67, 0.83, 0.67);
+    animation-iteration-count: 100;
+    background: $blue;
+  }
+
+  @keyframes loader {
+    from {
+      left: -25%;
+    }
+    to {
+      left: 100%;
+    }
+  }
 
   .datasource-picker {
     min-width: 200px;