Task #15681: Feature: Replace the loading mask with a loading indicator.

The loading mask has been replaced with a loading indicator. On devices
or browser windows with a screen width < 720px the loading indicator
will be rendered above the tabbar at left bottom position. Otherwise it
will appear left aligned inside the tabbar.

src/main/webapp/app/app.js

@@ -296,23 +296,48 @@ Ext.application({
 		}
 	},
 
+	showMask: function (mask, duration) {
+		var minimumDuration =  800;
+
+		Ext.Viewport.setMasked(mask);
+		this.maskedMessage = mask.message;
+		var hideLoadMask = Ext.Function.createDelayed(function (message) {
+			if (this.maskedMessage === message) {
+				Ext.Viewport.setMasked(false);
+			}
+		}, minimumDuration, this, [mask.message]);
+
+		Ext.defer(hideLoadMask, (duration || 5000) - minimumDuration);
+		return hideLoadMask;
+	},
+
 	/**
-	 * Wrapper for an invidivudal LoadMask
+	 * Wrapper for an individual loading mask
 	 */
 	showLoadMask: function (message, duration) {
-		var minimumDuration = 800;
-
-		Ext.Viewport.setMasked({
+		return this.showMask({
 			xtype: 'loadmask',
 			message: message || ""
-		});
+		}, duration);
+	},
 
-		var hideLoadMask = Ext.Function.createDelayed(function () {
-			Ext.Viewport.setMasked(false);
-		}, minimumDuration);
-		Ext.defer(hideLoadMask, (duration || 5000) - minimumDuration);
+	/**
+	 * Wrapper for an individual load indicator
+	 */
+	showLoadIndicator: function (message, duration) {
+		var screenWidth = (window.innerWidth > 0) ? window.innerWidth : screen.width;
+		var indicatorCls = 'x-loading-mask customLoadingIndicator ' +
+			(screenWidth < 720 ? 'overlayLoadingIndicator' : 'toolbarLoadingIndicator');
 
-		return hideLoadMask;
+		return this.showMask({
+			xtype: 'loadmask',
+			baseCls: '',
+			top: 'initial',
+			right: 'initial',
+			cls: indicatorCls,
+			message: message || '',
+			bottom: screenWidth < 720 ? '60px' : '4px'
+		}, duration);
 	},
 
 	/**

src/main/webapp/app/controller/Feedback.js

@@ -105,16 +105,5 @@ Ext.define("ARSnova.controller.Feedback", {
 			fP.activeItem = 1;
 		}
 		tP.setActiveItem(fP);
-	},
-
-	statistic: function () {
-		ARSnova.app.showLoadMask("Erzeuge die Grafik...");
-		var fP = ARSnova.app.mainTabPanel.tabPanel.feedbackTabPanel;
-		fP.statisticPanel.backButton.show();
-		ARSnova.app.mainTabPanel.tabPanel.setActiveItem(fP);
-
-		ARSnova.app.mainTabPanel.tabPanel.feedbackTabPanel.addListener('deactivate', function (panel) {
-			panel.statisticPanel.backButton.hide();
-		}, this, {single: true});
 	}
 });

src/main/webapp/app/controller/Questions.js

@@ -285,9 +285,16 @@ Ext.define("ARSnova.controller.Questions", {
 			return;
 		}
 
+		var hideLoadMask = ARSnova.app.showLoadIndicator(Messages.LOAD_MASK_SAVE);
 		question.saveSkillQuestion({
-			success: options.successFunc,
-			failure: options.failureFunc
+			success: function () {
+				options.successFunc();
+				hideLoadMask();
+			},
+			failure: function () {
+				options.failureFunc();
+				hideLoadMask();
+			}
 		});
 	},
 

src/main/webapp/app/controller/Sessions.js

@@ -50,6 +50,7 @@ Ext.define("ARSnova.controller.Sessions", {
 			return;
 		}
 		/* do login stuff */
+		var hideLoadMask = ARSnova.app.showLoadIndicator(Messages.LOAD_MASK_LOGIN);
 		var res = ARSnova.app.sessionModel.checkSessionLogin(options.keyword, {
 			success: function (obj) {
 				// check if user is creator of this session
@@ -95,12 +96,15 @@ Ext.define("ARSnova.controller.Sessions", {
 			},
 			notFound: function () {
 				Ext.Msg.alert(Messages.NOTIFICATION, Messages.SESSION_NOT_FOUND);
+				hideLoadMask();
 			},
 			forbidden: function () {
 				Ext.Msg.alert(Messages.NOTIFICATION, Messages.SESSION_LOCKED);
+				hideLoadMask();
 			},
 			failure: function () {
 				Ext.Msg.alert(Messages.NOTIFICATION, Messages.CONNECTION_PROBLEM);
+				hideLoadMask();
 			}
 		});
 	},
@@ -188,7 +192,6 @@ Ext.define("ARSnova.controller.Sessions", {
 				tabPanel.speakerTabPanel = Ext.create('ARSnova.view.speaker.TabPanel');
 				tabPanel.insert(1, tabPanel.speakerTabPanel);
 			} else {
-				hideLoadMask = ARSnova.app.showLoadMask(Messages.LOAD_MASK_LOGIN, 3000);
 				tabPanel.speakerTabPanel.tab.show();
 				tabPanel.speakerTabPanel.renew();
 			}
@@ -382,7 +385,7 @@ Ext.define("ARSnova.controller.Sessions", {
 
 	changeRole: function () {
 		var tabPanel = ARSnova.app.mainTabPanel.tabPanel;
-		var hideLoadMask = ARSnova.app.showLoadMask(Messages.LOAD_MASK_LOGIN);
+		var hideLoadMask = ARSnova.app.showLoadIndicator(Messages.CHANGE_ROLE + '...', 2000);
 
 		var reloadSession = function (animationDirection) {
 			ARSnova.app.socket.setSession(null);

src/main/webapp/app/internationalization.js

@@ -95,6 +95,7 @@
 				/* LOAD MASK */
 				LOAD_MASK: "Lade Daten...",
 				LOAD_MASK_LOGIN: "Login...",
+				LOAD_MASK_SAVE: 'Speichern...',
 				LOAD_MASK_SEARCH: "Suche Sessions...",
 				LOAD_MASK_SEARCH_QUESTIONS: "Suche Fragen...",
 				LOAD_MASK_SEARCH_COURSES: "Suche Kurse...",
@@ -662,6 +663,7 @@
 				/* LOAD MASK */
 				LOAD_MASK: "Loading...",
 				LOAD_MASK_LOGIN: "Login...",
+				LOAD_MASK_SAVE: 'Saving...',
 				LOAD_MASK_SEARCH: "Looking for sessions...",
 				LOAD_MASK_SEARCH_QUESTIONS: "Looking for questions...",
 				LOAD_MASK_SEARCH_COURSES: "Looking for courses...",

src/main/webapp/app/proxy/RestProxy.js

@@ -46,6 +46,15 @@ Ext.define('ARSnova.proxy.RestProxy', {
 		}, this, {single: true});
 	},
 
+	/**
+	 * @param start index
+	 * @param end index
+	 * @return  formatted range header string
+	 */
+	constructRangeRequestString: function (offset, limit) {
+		return 'items=' + offset + '-' + limit;
+	},
+
 	/**
 	 * Search for a session with specified keyword
 	 * @param keyword of session
@@ -134,7 +143,7 @@ Ext.define('ARSnova.proxy.RestProxy', {
 	 * @return session-objects, if found
 	 * @return false, if nothing found
 	 */
-	getMySessions: function (callbacks, sortby) {
+	getMySessions: function (callbacks, sortby, offset, limit) {
 		this.arsjax.request({
 			url: "session/",
 			method: "GET",
@@ -142,7 +151,6 @@ Ext.define('ARSnova.proxy.RestProxy', {
 				statusonly: true,
 				sortby: sortby
 			},
-
 			success: callbacks.success,
 			204: callbacks.empty,
 

src/main/webapp/app/view/diagnosis/StatisticsPanel.js

@@ -199,7 +199,7 @@ Ext.define('ARSnova.view.diagnosis.StatisticsPanel', {
 	},
 
 	updateData: function () {
-		var hideLoadMask = ARSnova.app.showLoadMask(Messages.LOAD_MASK);
+		var hideLoadMask = ARSnova.app.showLoadIndicator(Messages.LOAD_MASK);
 		this.statisticsStore.clearData();
 		this.getStatistics().then(hideLoadMask, hideLoadMask); // hide mask on success and on error
 	},

src/main/webapp/app/view/feedbackQuestions/QuestionsPanel.js

@@ -381,7 +381,7 @@ Ext.define('ARSnova.view.feedbackQuestions.QuestionsPanel', {
 	},
 
 	getFeedbackQuestions: function () {
-		var hideLoadMask = ARSnova.app.showLoadMask(Messages.LOADING_NEW_QUESTIONS);
+		var hideLoadMask = ARSnova.app.showLoadIndicator(Messages.LOADING_NEW_QUESTIONS);
 		ARSnova.app.questionModel.getInterposedQuestions(sessionStorage.getItem('keyword'), {
 			success: function (response) {
 				var questions = Ext.decode(response.responseText);

src/main/webapp/app/view/home/HomePanel.js

@@ -276,7 +276,7 @@ Ext.define('ARSnova.view.home.HomePanel', {
 	},
 
 	onSubmit: function () {
-		ARSnova.app.showLoadMask(Messages.LOGIN_LOAD_MASK);
+		ARSnova.app.showLoadIndicator(Messages.LOGIN_LOAD_MASK);
 
 		// delete the textfield-focus, to hide the numeric keypad on phones
 		this.down('textfield').blur();
@@ -323,7 +323,7 @@ Ext.define('ARSnova.view.home.HomePanel', {
 		var me = this;
 		var promise = new RSVP.Promise();
 
-		var hideLoadingMask = ARSnova.app.showLoadMask(Messages.LOAD_MASK_SEARCH);
+		var hideLoadingMask = ARSnova.app.showLoadIndicator(Messages.LOAD_MASK_SEARCH);
 
 		ARSnova.app.restProxy.getMyVisitedSessions({
 			success: function (sessions) {
@@ -359,7 +359,7 @@ Ext.define('ARSnova.view.home.HomePanel', {
 		var me = this;
 		var promise = new RSVP.Promise();
 
-		var hideLoadingMask = ARSnova.app.showLoadMask(Messages.LOAD_MASK_SEARCH);
+		var hideLoadingMask = ARSnova.app.showLoadIndicator(Messages.LOAD_MASK_SEARCH);
 
 		ARSnova.app.sessionModel.getMySessions({
 			success: function (response) {
@@ -400,7 +400,7 @@ Ext.define('ARSnova.view.home.HomePanel', {
 			form.show();
 
 			var buttonHandler = function (options) {
-				var hideLoadMask = ARSnova.app.showLoadMask(Messages.LOAD_MASK_LOGIN);
+				var hideLoadMask = ARSnova.app.showLoadIndicator(Messages.LOAD_MASK_LOGIN);
 				ARSnova.app.getController('Sessions').login({
 					keyword: options.config.sessionObj.keyword
 				});

src/main/webapp/app/view/home/MySessionsPanel.js

@@ -217,7 +217,7 @@ Ext.define('ARSnova.view.home.MySessionsPanel', {
 					scope: this,
 					loadsuccess: function (data) {
 						if (!Ext.os.is.iOS) {
-							var hideLoadMask = ARSnova.app.showLoadMask(Messages.LOAD_MASK_SESSION_IMPORT, 240000);
+							var hideLoadMask = ARSnova.app.showLoadIndicator(Messages.LOAD_MASK_SESSION_IMPORT, 240000);
 							try {
 								var n = data.indexOf("base64,");
 								data = decodeURIComponent(window.escape(atob(data.substring(n + 7)))); // remove disturbing prefix
@@ -423,7 +423,7 @@ Ext.define('ARSnova.view.home.MySessionsPanel', {
 		var me = this;
 		var promise = new RSVP.Promise();
 
-		var hideLoadMask = ARSnova.app.showLoadMask(Messages.LOAD_MASK_SEARCH);
+		var hideLoadMask = ARSnova.app.showLoadIndicator(Messages.LOAD_MASK_SEARCH);
 		ARSnova.app.sessionModel.getMySessions({
 			success: function (response) {
 				var sessions = Ext.decode(response.responseText);
@@ -438,7 +438,7 @@ Ext.define('ARSnova.view.home.MySessionsPanel', {
 				}
 
 				var sessionButtonHandler = function (options) {
-					var hideLoadMask = ARSnova.app.showLoadMask(Messages.LOAD_MASK_LOGIN);
+					var hideLoadMask = ARSnova.app.showLoadIndicator(Messages.LOAD_MASK_LOGIN);
 					localStorage.setItem('role', ARSnova.app.USER_ROLE_SPEAKER);
 					ARSnova.app.userRole = ARSnova.app.USER_ROLE_SPEAKER;
 					ARSnova.app.setWindowTitle();
@@ -520,7 +520,7 @@ Ext.define('ARSnova.view.home.MySessionsPanel', {
 			return promise;
 		}
 
-		var hideLoadMask = ARSnova.app.showLoadMask(Messages.LOAD_MASK_SEARCH);
+		var hideLoadMask = ARSnova.app.showLoadIndicator(Messages.LOAD_MASK_SEARCH);
 		ARSnova.app.sessionModel.getMyPublicPoolSessions({
 			success: function (response) {
 				var sessions = Ext.decode(response.responseText);
@@ -535,7 +535,7 @@ Ext.define('ARSnova.view.home.MySessionsPanel', {
 				}
 
 				var sessionButtonHandler = function (options) {
-					var hideLoadMask = ARSnova.app.showLoadMask(Messages.LOAD_MASK_LOGIN);
+					var hideLoadMask = ARSnova.app.showLoadIndicator(Messages.LOAD_MASK_LOGIN);
 					localStorage.setItem('role', ARSnova.app.USER_ROLE_SPEAKER);
 					ARSnova.app.setWindowTitle();
 
@@ -599,7 +599,7 @@ Ext.define('ARSnova.view.home.MySessionsPanel', {
 
 	loadVisitedSessions: function () {
 		var me = this;
-		var hideLoadingMask = ARSnova.app.showLoadMask(Messages.LOAD_MASK_SEARCH);
+		var hideLoadingMask = ARSnova.app.showLoadIndicator(Messages.LOAD_MASK_SEARCH);
 		var promise = new RSVP.Promise();
 
 		ARSnova.app.restProxy.getMyVisitedSessions({
@@ -612,7 +612,7 @@ Ext.define('ARSnova.view.home.MySessionsPanel', {
 					panel.lastVisitedSessionsForm.show();
 
 					var sessionButtonHandler = function (options) {
-						var hideLoadMask = ARSnova.app.showLoadMask(Messages.LOAD_MASK_LOGIN);
+						var hideLoadMask = ARSnova.app.showLoadIndicator(Messages.LOAD_MASK_LOGIN);
 						localStorage.setItem('lastVisitedRole', ARSnova.app.USER_ROLE_SPEAKER);
 						localStorage.setItem('role', ARSnova.app.USER_ROLE_STUDENT);
 						ARSnova.app.userRole = ARSnova.app.USER_ROLE_STUDENT;

src/main/webapp/app/view/home/PublicPoolSingleItemPanel.js

@@ -303,7 +303,7 @@ Ext.define('ARSnova.view.home.PublicPoolSingleItemPanel', {
 			duration: 700
 		});
 
-		var hideLoadMask = ARSnova.app.showLoadMask(Messages.LOAD_MASK_LOGIN);
+		var hideLoadMask = ARSnova.app.showLoadIndicator(Messages.LOAD_MASK_LOGIN);
 		ARSnova.app.getController('Auth').roleSelect({
 			mode: ARSnova.app.USER_ROLE_STUDENT
 		});

src/main/webapp/app/view/home/SessionExportListPanel.js

@@ -135,7 +135,7 @@ Ext.define('ARSnova.view.home.SessionExportListPanel', {
 		var me = this;
 		var promise = new RSVP.Promise();
 
-		var hideLoadMask = ARSnova.app.showLoadMask(Messages.LOAD_MASK_SEARCH);
+		var hideLoadMask = ARSnova.app.showLoadIndicator(Messages.LOAD_MASK_SEARCH);
 
 		ARSnova.app.sessionModel.getMySessions({
 			success: function (response) {
@@ -168,7 +168,7 @@ Ext.define('ARSnova.view.home.SessionExportListPanel', {
 		var me = this;
 		var promise = new RSVP.Promise();
 
-		var hideLoadMask = ARSnova.app.showLoadMask(Messages.LOAD_MASK_SEARCH);
+		var hideLoadMask = ARSnova.app.showLoadIndicator(Messages.LOAD_MASK_SEARCH);
 
 		ARSnova.app.sessionModel.getMyPublicPoolSessions({
 			success: function (response) {

src/main/webapp/app/view/speaker/InClass.js

@@ -239,7 +239,7 @@ Ext.define('ARSnova.view.speaker.InClass', {
 						"<br>" + Messages.DELETE_SESSION_NOTICE;
 				Ext.Msg.confirm(Messages.DELETE_SESSION_TITLE, msg, function (answer) {
 					if (answer === 'yes') {
-						ARSnova.app.showLoadMask(Messages.LOAD_MASK_SESSION_DELETE);
+						ARSnova.app.showLoadIndicator(Messages.LOAD_MASK_SESSION_DELETE);
 						ARSnova.app.sessionModel.destroy(sessionStorage.getItem('keyword'), {
 							success: function () {
 								ARSnova.app.mainTabPanel.tabPanel.on('activeitemchange', function () {

src/main/webapp/app/view/speaker/QuestionDetailsPanel.js

@@ -491,7 +491,7 @@ Ext.define('ARSnova.view.speaker.QuestionDetailsPanel', {
 						if (newValue === 0 && typeof this.questionObj.showStatistic === "undefined" ||
 							newValue === this.questionObj.showStatistic) return;
 
-						var hideLoadMask = ARSnova.app.showLoadMask(Messages.LOAD_MASK_ACTIVATION);
+						var hideLoadMask = ARSnova.app.showLoadIndicator(Messages.LOAD_MASK_ACTIVATION);
 						var question = Ext.create('ARSnova.model.Question', this.questionObj);
 
 						switch (newValue) {
@@ -536,7 +536,7 @@ Ext.define('ARSnova.view.speaker.QuestionDetailsPanel', {
 							return;
 						}
 
-						var hideLoadMask = ARSnova.app.showLoadMask(Messages.LOAD_MASK_ACTIVATION);
+						var hideLoadMask = ARSnova.app.showLoadIndicator(Messages.LOAD_MASK_ACTIVATION);
 						var question = Ext.create('ARSnova.model.Question', this.questionObj);
 
 						switch (newValue) {

src/main/webapp/app/view/speaker/ShowcaseEditButtons.js

@@ -59,7 +59,7 @@ Ext.define('ARSnova.view.speaker.ShowcaseEditButtons', {
 						}
 
 						var me = this;
-						var hideLoadMask = ARSnova.app.showLoadMask(Messages.LOAD_MASK_ACTIVATION);
+						var hideLoadMask = ARSnova.app.showLoadIndicator(Messages.LOAD_MASK_ACTIVATION);
 						var question = Ext.create('ARSnova.model.Question', this.questionObj);
 
 						switch (newValue) {
@@ -106,7 +106,7 @@ Ext.define('ARSnova.view.speaker.ShowcaseEditButtons', {
 							}
 
 							var me = this;
-							var hideLoadMask = ARSnova.app.showLoadMask(Messages.LOAD_MASK_ACTIVATION);
+							var hideLoadMask = ARSnova.app.showLoadIndicator(Messages.LOAD_MASK_ACTIVATION);
 							var question = Ext.create('ARSnova.model.Question', this.questionObj);
 
 							switch (newValue) {

src/main/webapp/app/view/speaker/ShowcaseQuestionPanel.js

@@ -184,7 +184,7 @@ Ext.define('ARSnova.view.speaker.ShowcaseQuestionPanel', {
 	},
 
 	getAllSkillQuestions: function () {
-		var hideIndicator = ARSnova.app.showLoadMask(Messages.LOAD_MASK_SEARCH_QUESTIONS);
+		var hideIndicator = ARSnova.app.showLoadIndicator(Messages.LOAD_MASK_SEARCH_QUESTIONS);
 
 		this.getController().getQuestions(sessionStorage.getItem("keyword"), {
 			success: function (response) {

src/main/webapp/app/view/speaker/form/ImageUploadPanel.js

@@ -82,7 +82,7 @@ Ext.define('ARSnova.view.speaker.form.ImageUploadPanel', {
 				scope: this,
 				loadsuccess: function (dataurl, e) {
 					var self = this;
-					var mask = ARSnova.app.showLoadMask(Messages.COMPRESSING_MASK);
+					var mask = ARSnova.app.showLoadIndicator(Messages.COMPRESSING_MASK);
 					self.tryToCompress(dataurl, function (response) {
 						mask();
 						if (!response) {

src/main/webapp/app/view/user/QuestionPanel.js

@@ -107,7 +107,7 @@ Ext.define('ARSnova.view.user.QuestionPanel', {
 	getUnansweredSkillQuestions: function () {
 		var self = this;
 
-		var hideLoadMask = ARSnova.app.showLoadMask(Messages.LOAD_MASK_SEARCH_QUESTIONS);
+		var hideLoadMask = ARSnova.app.showLoadIndicator(Messages.LOAD_MASK_SEARCH_QUESTIONS);
 		this.getQuestionLoader()(sessionStorage.getItem("keyword"), {
 			success: function (questions) {
 				var userQuestionsPanel = ARSnova.app.mainTabPanel.tabPanel.userQuestionsPanel;

src/main/webapp/resources/sass/app/components/_loadingMask.scss

@@ -24,48 +24,93 @@
 		background: rgba(0,0,0,0.3) center center no-repeat;
 		
 		.x-mask-message {
-			color: rgba(230,230,230,0.9);
+			color: rgba(255,255,255,0.9);
 			font-weight: normal;
 		}
 		
 		.x-loading-spinner {
-			-webkit-animation-duration: 0.6s;
+			-webkit-animation-duration: 0.8s;
 		    -webkit-animation-name: x-loading-spinner-rotate;
 		    -webkit-animation-iteration-count: infinite;
 		    -webkit-animation-timing-function: linear;
 		    
-		    animation-duration: 0.6s;
+		    animation-duration: 0.8s;
 		    animation-name: x-loading-spinner-rotate;
 		    animation-iteration-count: infinite;
 		    animation-timing-function: linear;
 			
 			&> span.x-loading-top {
-				background-color: rgba(215,215,215,0.99);
-				&:before { background-color: rgba(215,215,215,0.15); }
-				&:after { background-color: rgba(215,215,215,0.9); }
+				background-color: rgba(255,255,255,0.99);
+				&:before { background-color: rgba(255,255,255,0.15); }
+				&:after { background-color: rgba(255,255,255,0.9); }
 			}
 			
 			&> span.x-loading-right {
-				background-color: rgba(215,215,215,0.25);
-				&:before { background-color: rgba(215,215,215,0.3); }
-				&:after { background-color: rgba(215,215,215,0.2); }
+				background-color: rgba(255,255,255,0.25);
+				&:before { background-color: rgba(255,255,255,0.3); }
+				&:after { background-color: rgba(255,255,255,0.2); }
 			}
 			
 			&> span.x-loading-left {
-				background-color: rgba(215,215,215,0.7);
-				&:before { background-color: rgba(215,215,215,0.8); }
-				&:after { background-color: rgba(215,215,215,0.6); }
+				background-color: rgba(255,255,255,0.7);
+				&:before { background-color: rgba(255,255,255,0.8); }
+				&:after { background-color: rgba(255,255,255,0.6); }
 			}
 			
 			&> span.x-loading-bottom {
-				background-color: rgba(215,215,215,0.4);
-				&:before { background-color: rgba(215,215,215,0.5); }
-				&:after { background-color: rgba(215,215,215,0.35); }
+				background-color: rgba(255,255,255,0.4);
+				&:before { background-color: rgba(255,255,255,0.5); }
+				&:after { background-color: rgba(255,255,255,0.35); }
 			}
 		}
 	}
 }
 
+.x-loading-mask.customLoadingIndicator {
+	margin-left: 5px;
+
+	&.toolbarLoadingIndicator {
+		.x-mask-inner {
+			background: none;
+		}
+	}
+
+	&.overlayLoadingIndicator {
+		.x-mask-message {
+			color: white;
+		}
+	}
+
+	.x-mask-inner {
+		height: 45px;
+
+		.x-mask-message {
+			display: inline-block;
+			position: relative;
+			margin-right: 10px;
+			margin-left: 50px;
+			top: 12.5px;
+		}
+
+		.x-loading-spinner-outer {
+			display: inline-block;
+			position: absolute;
+			top: 4px;
+
+			.x-loading-spinner {
+				-webkit-transform-origin: 0.5em 0.4em;
+				transform-origin: 0.5em 0.4em;
+
+				span, span:before, span:after {
+					-webkit-transform-origin: 0.05em 0.4em;
+					transform-origin: 0.05em 0.4em;
+					height: 0.2em;
+				}
+	 		}
+		}
+	}
+}
+
 @keyframes x-loading-spinner-rotate{
 	0%, 8.32% {
 		transform: rotate(0deg);