Skip to content

C
course-discovery
Commit 40b87e03 by Waheed Ahmed
Options

Add loading spinner on ajax calls. 

ECOM-7862
parent d5e11a73
Showing with 94 additions and 0 deletions
course_discovery/static/images/ajax-loading.svg 0 → 100755
<svg width='120px' height='120px' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="uil-default"><rect x="0" y="0" width="100" height="100" fill="none" class="bk"></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#00b2ff' transform='rotate(0 50 50) translate(0 -30)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#00b2ff' transform='rotate(30 50 50) translate(0 -30)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.08333333333333333s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#00b2ff' transform='rotate(60 50 50) translate(0 -30)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.16666666666666666s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#00b2ff' transform='rotate(90 50 50) translate(0 -30)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.25s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#00b2ff' transform='rotate(120 50 50) translate(0 -30)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.3333333333333333s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#00b2ff' transform='rotate(150 50 50) translate(0 -30)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.4166666666666667s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#00b2ff' transform='rotate(180 50 50) translate(0 -30)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.5s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#00b2ff' transform='rotate(210 50 50) translate(0 -30)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.5833333333333334s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#00b2ff' transform='rotate(240 50 50) translate(0 -30)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.6666666666666666s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#00b2ff' transform='rotate(270 50 50) translate(0 -30)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.75s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#00b2ff' transform='rotate(300 50 50) translate(0 -30)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.8333333333333334s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#00b2ff' transform='rotate(330 50 50) translate(0 -30)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.9166666666666666s' repeatCount='indefinite'/></rect></svg>
course_discovery/static/js/publisher/ajax-loading.js 0 → 100755
(function($){
var config = {};
$.loadingSpinner = function (options) {
var opts = $.extend(
$.loadingSpinner.default,
options
);
config = opts;
init(opts);
var selector = '#' + opts.id;
$(document).on('ajaxStart', function(){
if (config.ajax) {
$(selector).show();
}
});
$(document).on('ajaxComplete', function(){
setTimeout(function(){
$(selector).hide();
}, opts.minTime);
});
return $.loadingSpinner;
};
$.loadingSpinner.open = function (time) {
var selector = '#' + config.id;
$(selector).show();
if (time) {
setTimeout(function(){
$(selector).hide();
}, parseInt(time));
}
};
$.loadingSpinner.close = function () {
var selector = '#' + config.id;
$(selector).hide();
};
$.loadingSpinner.ajax = function (isListen) {
config.ajax = isListen;
};
$.loadingSpinner.default = {
ajax : true,
//wrap div
id : 'ajaxLoading',
zIndex : '10000',
background : 'rgba(0, 0, 0, 0.7)',
minTime : 200,
width : '100%',
height : '100%',
//loading img/gif
imgPath : '/static/images/ajax-loading.svg',
imgWidth : '65px',
imgHeight : '65px'
};
function init (opts) {
//wrap div style
var wrapCss = 'display: none;position: fixed;top: 0;bottom: 0;left: 0;right: 0;margin: auto;text-align: center;vertical-align: middle;';
var cssArray = [
'width:' + opts.width,
'height:' + opts.height,
'z-index:' + opts.zIndex,
'background:' + opts.background
];
wrapCss += cssArray.join(';');
//img style
var imgCss = 'top: 0;bottom: 0;left: 0;right: 0;margin: auto;position: absolute;';
cssArray = [
'width:' + opts.imgWidth,
'height:' + opts.imgWidth
];
imgCss += cssArray.join(';');
var html = '<div id="' + opts.id + '" style="' + wrapCss + '">'
+'<img src="' + opts.imgPath + '" style="' + imgCss + '">';
$(document).find('body').append(html);
}
})(window.jQuery||window.Zepto);
course_discovery/templates/publisher/base.html
......@@ -69,11 +69,13 @@
<script src="{% static 'js/publisher/main.js' %}"></script>
<script src="{% static 'js/publisher/views/navbar.js' %}"></script>
<script src="{% static 'js/publisher/utils.js' %}"></script>
<script src="{% static 'js/publisher/ajax-loading.js' %}"></script>
{% endcompress %}
<script type="text/javascript">
$(document).ready(function () {
addDatePicker();
$.loadingSpinner();
});
</script>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment