// fix anime dashboard loading

admin-dev/themes/default/css/admin-theme.css

@@ -30,4 +30,4 @@
  *  Email: dave@fontawesome.io
  *  Twitter: http://twitter.com/byscuits
  *  Work: Lead Product Designer @ Kyruus - http://kyruus.com
- */@font-face{font-family:'FontAwesome';src:url("../font/fontawesome-webfont.eot?v=3.2.1");src:url("../font/fontawesome-webfont.eot?#iefix&v=3.2.1") format("embedded-opentype"),url("../font/fontawesome-webfont.woff?v=3.2.1") format("woff"),url("../font/fontawesome-webfont.ttf?v=3.2.1") format("truetype"),url("../font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1") format("svg");font-weight:normal;font-style:normal}[class^="icon-"],[class*=" icon-"]{font-family:FontAwesome;font-weight:normal;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased;*margin-right:.3em}[class^="icon-"]:before,[class*=" icon-"]:before{text-decoration:inherit;display:inline-block;speak:none}.icon-large:before{vertical-align:-10%;font-size:1.3333333333333333em}a [class^="icon-"],a [class*=" icon-"]{display:inline}[class^="icon-"].icon-fixed-width,[class*=" icon-"].icon-fixed-width{display:inline-block;width:1.1428571428571428em;text-align:right;padding-right:0.2857142857142857em}[class^="icon-"].icon-fixed-width.icon-large,[class*=" icon-"].icon-fixed-width.icon-large{width:1.4285714285714286em}.icons-ul{margin-left:2.142857142857143em;list-style-type:none}.icons-ul>li{position:relative}.icons-ul .icon-li{position:absolute;left:-2.142857142857143em;width:2.142857142857143em;text-align:center;line-height:inherit}[class^="icon-"].hide,[class*=" icon-"].hide{display:none}.icon-muted{color:#eeeeee}.icon-light{color:#ffffff}.icon-dark{color:#333333}.icon-border{border:solid 1px #eeeeee;padding:.2em .25em .15em;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}.icon-2x{font-size:2em}.icon-2x.icon-border{border-width:2px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px}.icon-3x{font-size:3em}.icon-3x.icon-border{border-width:3px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}.icon-4x{font-size:4em}.icon-4x.icon-border{border-width:4px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px}.icon-5x{font-size:5em}.icon-5x.icon-border{border-width:5px;-webkit-border-radius:7px;-moz-border-radius:7px;border-radius:7px}.pull-right,.panel-heading-action{float:right}.pull-left,.page-head h2.page-title{float:left}[class^="icon-"].pull-left,.page-head h2[class^="icon-"].page-title,[class*=" icon-"].pull-left,.page-head h2[class*=" icon-"].page-title{margin-right:.3em}[class^="icon-"].pull-right,[class^="icon-"].panel-heading-action,[class*=" icon-"].pull-right,[class*=" icon-"].panel-heading-action{margin-left:.3em}[class^="icon-"],[class*=" icon-"]{display:inline;width:auto;height:auto;line-height:normal;vertical-align:baseline;background-image:none;background-position:0% 0%;background-repeat:repeat;margin-top:0}.icon-white,.nav-pills>.active>a>[class^="icon-"],.nav-pills>.active>a>[class*=" icon-"],.nav-list>.active>a>[class^="icon-"],.nav-list>.active>a>[class*=" icon-"],.navbar-inverse .nav>.active>a>[class^="icon-"],#header_infos .nav>.active>a>[class^="icon-"],.navbar-inverse #header_notifs_icon_wrapper>.active>a>[class^="icon-"],#header_infos #header_notifs_icon_wrapper>.active>a>[class^="icon-"],.navbar-inverse #header_employee_box>.active>a>[class^="icon-"],#header_infos #header_employee_box>.active>a>[class^="icon-"],.navbar-inverse #header_quick>.active>a>[class^="icon-"],#header_infos #header_quick>.active>a>[class^="icon-"],.navbar-inverse .nav>.active>a>[class*=" icon-"],#header_infos .nav>.active>a>[class*=" icon-"],.navbar-inverse #header_notifs_icon_wrapper>.active>a>[class*=" icon-"],#header_infos #header_notifs_icon_wrapper>.active>a>[class*=" icon-"],.navbar-inverse #header_employee_box>.active>a>[class*=" icon-"],#header_infos #header_employee_box>.active>a>[class*=" icon-"],.navbar-inverse #header_quick>.active>a>[class*=" icon-"],#header_infos #header_quick>.active>a>[class*=" icon-"],.dropdown-menu>li>a:hover>[class^="icon-"],.dropdown-menu>li>a:hover>[class*=" icon-"],.dropdown-menu>.active>a>[class^="icon-"],.dropdown-menu>.active>a>[class*=" icon-"],.dropdown-submenu:hover>a>[class^="icon-"],.dropdown-submenu:hover>a>[class*=" icon-"]{background-image:none}.btn [class^="icon-"].icon-large,.nav [class^="icon-"].icon-large,#header_notifs_icon_wrapper [class^="icon-"].icon-large,#header_employee_box [class^="icon-"].icon-large,#header_quick [class^="icon-"].icon-large,.btn [class*=" icon-"].icon-large,.nav [class*=" icon-"].icon-large,#header_notifs_icon_wrapper [class*=" icon-"].icon-large,#header_employee_box [class*=" icon-"].icon-large,#header_quick [class*=" icon-"].icon-large{line-height:.9em}.btn [class^="icon-"].icon-spin,.btn #dashboard .loading [class^="icon-"].data_value:before,#dashboard .loading .btn [class^="icon-"].data_value:before,.nav [class^="icon-"].icon-spin,#header_notifs_icon_wrapper [class^="icon-"].icon-spin,#header_employee_box [class^="icon-"].icon-spin,#header_quick [class^="icon-"].icon-spin,.nav #dashboard .loading [class^="icon-"].data_value:before,#dashboard .loading .nav [class^="icon-"].data_value:Line truncated
+ */@font-face{font-family:'FontAwesome';src:url("../font/fontawesome-webfont.eot?v=3.2.1");src:url("../font/fontawesome-webfont.eot?#iefix&v=3.2.1") format("embedded-opentype"),url("../font/fontawesome-webfont.woff?v=3.2.1") format("woff"),url("../font/fontawesome-webfont.ttf?v=3.2.1") format("truetype"),url("../font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1") format("svg");font-weight:normal;font-style:normal}[class^="icon-"],[class*=" icon-"]{font-family:FontAwesome;font-weight:normal;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased;*margin-right:.3em}[class^="icon-"]:before,[class*=" icon-"]:before{text-decoration:inherit;display:inline-block;speak:none}.icon-large:before{vertical-align:-10%;font-size:1.3333333333333333em}a [class^="icon-"],a [class*=" icon-"]{display:inline}[class^="icon-"].icon-fixed-width,[class*=" icon-"].icon-fixed-width{display:inline-block;width:1.1428571428571428em;text-align:right;padding-right:0.2857142857142857em}[class^="icon-"].icon-fixed-width.icon-large,[class*=" icon-"].icon-fixed-width.icon-large{width:1.4285714285714286em}.icons-ul{margin-left:2.142857142857143em;list-style-type:none}.icons-ul>li{position:relative}.icons-ul .icon-li{position:absolute;left:-2.142857142857143em;width:2.142857142857143em;text-align:center;line-height:inherit}[class^="icon-"].hide,[class*=" icon-"].hide{display:none}.icon-muted{color:#eeeeee}.icon-light{color:#ffffff}.icon-dark{color:#333333}.icon-border{border:solid 1px #eeeeee;padding:.2em .25em .15em;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}.icon-2x{font-size:2em}.icon-2x.icon-border{border-width:2px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px}.icon-3x{font-size:3em}.icon-3x.icon-border{border-width:3px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}.icon-4x{font-size:4em}.icon-4x.icon-border{border-width:4px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px}.icon-5x{font-size:5em}.icon-5x.icon-border{border-width:5px;-webkit-border-radius:7px;-moz-border-radius:7px;border-radius:7px}.pull-right,.panel-heading-action{float:right}.pull-left,.page-head h2.page-title{float:left}[class^="icon-"].pull-left,.page-head h2[class^="icon-"].page-title,[class*=" icon-"].pull-left,.page-head h2[class*=" icon-"].page-title{margin-right:.3em}[class^="icon-"].pull-right,[class^="icon-"].panel-heading-action,[class*=" icon-"].pull-right,[class*=" icon-"].panel-heading-action{margin-left:.3em}[class^="icon-"],[class*=" icon-"]{display:inline;width:auto;height:auto;line-height:normal;vertical-align:baseline;background-image:none;background-position:0% 0%;background-repeat:repeat;margin-top:0}.icon-white,.nav-pills>.active>a>[class^="icon-"],.nav-pills>.active>a>[class*=" icon-"],.nav-list>.active>a>[class^="icon-"],.nav-list>.active>a>[class*=" icon-"],.navbar-inverse .nav>.active>a>[class^="icon-"],#header_infos .nav>.active>a>[class^="icon-"],.navbar-inverse #header_notifs_icon_wrapper>.active>a>[class^="icon-"],#header_infos #header_notifs_icon_wrapper>.active>a>[class^="icon-"],.navbar-inverse #header_employee_box>.active>a>[class^="icon-"],#header_infos #header_employee_box>.active>a>[class^="icon-"],.navbar-inverse #header_quick>.active>a>[class^="icon-"],#header_infos #header_quick>.active>a>[class^="icon-"],.navbar-inverse .nav>.active>a>[class*=" icon-"],#header_infos .nav>.active>a>[class*=" icon-"],.navbar-inverse #header_notifs_icon_wrapper>.active>a>[class*=" icon-"],#header_infos #header_notifs_icon_wrapper>.active>a>[class*=" icon-"],.navbar-inverse #header_employee_box>.active>a>[class*=" icon-"],#header_infos #header_employee_box>.active>a>[class*=" icon-"],.navbar-inverse #header_quick>.active>a>[class*=" icon-"],#header_infos #header_quick>.active>a>[class*=" icon-"],.dropdown-menu>li>a:hover>[class^="icon-"],.dropdown-menu>li>a:hover>[class*=" icon-"],.dropdown-menu>.active>a>[class^="icon-"],.dropdown-menu>.active>a>[class*=" icon-"],.dropdown-submenu:hover>a>[class^="icon-"],.dropdown-submenu:hover>a>[class*=" icon-"]{background-image:none}.btn [class^="icon-"].icon-large,.nav [class^="icon-"].icon-large,#header_notifs_icon_wrapper [class^="icon-"].icon-large,#header_employee_box [class^="icon-"].icon-large,#header_quick [class^="icon-"].icon-large,.btn [class*=" icon-"].icon-large,.nav [class*=" icon-"].icon-large,#header_notifs_icon_wrapper [class*=" icon-"].icon-large,#header_employee_box [class*=" icon-"].icon-large,#header_quick [class*=" icon-"].icon-large{line-height:.9em}.btn [class^="icon-"].icon-spin,.btn #dashboard .loading [class^="icon-"].data_value:before,#dashboard .loading .btn [class^="icon-"].data_value:before,.nav [class^="icon-"].icon-spin,#header_notifs_icon_wrapper [class^="icon-"].icon-spin,#header_employee_box [class^="icon-"].icon-spin,#header_quick [class^="icon-"].icon-spin,.nav #dashboard .loading [class^="icon-"].data_value:before,#dashboard .loading .nav [class^="icon-"].data_value:Line truncated

admin-dev/themes/default/css/admin-theme.sass

@@ -1053,6 +1053,7 @@ fieldset > .row
 			margin: 4px -16px
 		dl
 			margin: 0
+			min-height: 120px
 			text-align: center
 			background-color: white
 			padding: 10px
@@ -1093,10 +1094,7 @@ fieldset > .row
 
 	.data_value
 		span, .dash_trend
-			+transition-property(opacity)
+			@extend .data_loading
-			+transition-duration(0.6s)
-			+transition-timing-function(ease-in)
-			+opacity(1)
 	.loading
 		.data_value
 			min-width: 30px
@@ -1108,9 +1106,44 @@ fieldset > .row
 				content: "\f021"
 				color: #ccc
 			span, .dash_trend
-				+opacity(0)
+				display: none
+
 		.data_table
 
 		.data_chart
 
 		.data_trends
+
+
+=animation($name,$value)
+	-webkit-animation-#{$name}: $value
+	animation-#{$name}: $value
+
+=keyframes($name)
+	@-webkit-keyframes #{$name}
+		@content
+	@-moz-keyframes #{$name}
+		@content
+	@-ms-keyframes #{$name}
+		@content
+	@-o-keyframes #{$name}
+		@content
+	@keyframes #{$name}
+		@content
+
+.data_loading
+	opacity: 1
+	+animation(name,bounceG)
+	+animation(duration,0.7s)
+	+animation(direction,linear)
+	+scale(0.7)
+
++keyframes(bounceG)
+	0%
+		+opacity(0)
+		+scale(0.1)
+	100%
+		+opacity(1)
+		+scale(1)
+		
+

modules/dashtrends/views/templates/hook/dashboard_zone_two.tpl

@@ -35,35 +35,35 @@
 			</a>
 		</span>
 	</header>
-	<div id="dash_trends_toolbar" class="row">
+	<div id="dashtrends_toolbar" class="row">
 		<dl class="col-xs-4 col-lg-2 active">
 			<dt>{l s='Sales'}</dt>
-			<dd class="size_l"><span id="sales_score"></span></dd>
+			<dd class="data_value size_l"><span id="sales_score"></span></dd>
 			<dd class="dash_trend dash_trend_up"><span id="sales_score_trends"></span>%</dd>
 		</dl>
 		<dl class="col-xs-4 col-lg-2">
 			<dt>{l s='Orders'}</dt>
-			<dd class="size_l"><span id="orders_score"></span></dd>
+			<dd class="data_value size_l"><span id="orders_score"></span></dd>
 			<dd class="dash_trend dash_trend_down"><span id="orders_score_trends"></span>%</dd>
 		</dl>
 		<dl class="col-xs-4 col-lg-2">
 			<dt>{l s='Cart Value'}</dt>
-			<dd class="size_l"><span id="cart_value_score"></span></dd>
+			<dd class="data_value size_l"><span id="cart_value_score"></span></dd>
 			<dd class="dash_trend dash_trend_up"><span id="cart_value_score_trends"></span>%</dd>
 		</dl>
 		<dl class="col-xs-4 col-lg-2">
 			<dt>{l s='Visits'}</dt>
-			<dd class="size_l"><span id="visits_score"></span></dd>
+			<dd class="data_value size_l"><span id="visits_score"></span></dd>
 			<dd class="dash_trend dash_trend_down"><span id="visits_score_trends"></span>%</dd>
 		</dl>
 		<dl class="col-xs-4 col-lg-2">
 			<dt>{l s='Converstion Rate'}</dt>
-			<dd class="size_l"><span id="convertion_rate_score"></span>%</dd>
+			<dd class="data_value size_l"><span id="convertion_rate_score"></span>%</dd>
 			<dd class="dash_trend dash_trend_up"><span id="convertion_rate_score_trends"></span>%</dd>
 		</dl>
 		<dl class="col-xs-4 col-lg-2">
 			<dt>{l s='Net Profits'}</dt>
-			<dd class="size_l"><span id="net_profits_score"></span></dd>
+			<dd class="data_value size_l"><span id="net_profits_score"></span></dd>
 			<dd class="dash_trend dash_trend_up"><span id="net_profits_score_trends"></span>%</dd>
 		</dl>
 	</div>