diff --git a/Gruntfile.js b/Gruntfile.js index d23ddf1..e6b2687 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -12,6 +12,37 @@ module.exports = function(grunt) { ' */\n', // Task configuration. + sass: { + options: { + sourceMap: false + }, + dist: { + files: { + 'build/loading-bar.css': 'src/loading-bar.scss' + } + } + }, + + postcss: { + options: { + map: false, + + processors: [ + require('autoprefixer')({browsers: 'last 2 versions'}), // add vendor prefixes + ] + }, + dist: { + src: 'build/loading-bar.css' + } + }, + + sasslint: { + options: { + configFile: 'sass-lint.yml' + }, + target: ['src/loading-bar.scss'] + }, + uglify: { options: { banner: '<%= banner %>', @@ -29,7 +60,7 @@ module.exports = function(grunt) { report: 'gzip' }, minify: { - src: 'src/loading-bar.css', + src: 'build/loading-bar.css', dest: 'build/loading-bar.min.css' } }, @@ -82,7 +113,7 @@ module.exports = function(grunt) { banner: '<%= banner %>' }, files: { - 'build/loading-bar.css': 'src/loading-bar.css', + // 'build/loading-bar.css': 'src/loading-bar.css', 'build/loading-bar.js': 'src/loading-bar.js', } } @@ -94,8 +125,11 @@ module.exports = function(grunt) { grunt.loadNpmTasks('grunt-contrib-cssmin'); grunt.loadNpmTasks('grunt-contrib-concat'); grunt.loadNpmTasks('grunt-karma'); + grunt.loadNpmTasks('grunt-sass'); + grunt.loadNpmTasks('grunt-postcss'); + grunt.loadNpmTasks('grunt-sass-lint'); - grunt.registerTask('default', ['jshint', 'karma:unit', 'karma:unit13', 'karma:unit14', 'uglify', 'cssmin', 'concat:build']); + grunt.registerTask('default', ['jshint', 'sasslint', 'karma:unit', 'karma:unit13', 'karma:unit14', 'uglify', 'sass', 'postcss', 'cssmin', 'concat:build']); grunt.registerTask('test', ['karma:watch']); grunt.registerTask('build', ['default']); diff --git a/build/loading-bar.css b/build/loading-bar.css index 72408d1..064a31d 100644 --- a/build/loading-bar.css +++ b/build/loading-bar.css @@ -1,110 +1,77 @@ -/*! - * angular-loading-bar v0.9.0 - * https://chieffancypants.github.io/angular-loading-bar - * Copyright (c) 2016 Wes Cruver - * License: MIT - */ - -/* Make clicks pass-through */ -#loading-bar, -#loading-bar-spinner { +#loading-bar { pointer-events: none; - -webkit-pointer-events: none; -webkit-transition: 350ms linear all; - -moz-transition: 350ms linear all; - -o-transition: 350ms linear all; - transition: 350ms linear all; -} - -#loading-bar.ng-enter, -#loading-bar.ng-leave.ng-leave-active, -#loading-bar-spinner.ng-enter, -#loading-bar-spinner.ng-leave.ng-leave-active { - opacity: 0; -} - -#loading-bar.ng-enter.ng-enter-active, -#loading-bar.ng-leave, -#loading-bar-spinner.ng-enter.ng-enter-active, -#loading-bar-spinner.ng-leave { - opacity: 1; -} - -#loading-bar .bar { - -webkit-transition: width 350ms; - -moz-transition: width 350ms; - -o-transition: width 350ms; - transition: width 350ms; - - background: #29d; - position: fixed; - z-index: 10002; - top: 0; - left: 0; - width: 100%; - height: 2px; - border-bottom-right-radius: 1px; - border-top-right-radius: 1px; -} - -/* Fancy blur effect */ -#loading-bar .peg { - position: absolute; - width: 70px; - right: 0; - top: 0; - height: 2px; - opacity: .45; - -moz-box-shadow: #29d 1px 0 6px 1px; - -ms-box-shadow: #29d 1px 0 6px 1px; - -webkit-box-shadow: #29d 1px 0 6px 1px; - box-shadow: #29d 1px 0 6px 1px; - -moz-border-radius: 100%; - -webkit-border-radius: 100%; - border-radius: 100%; -} + transition: 350ms linear all; } + #loading-bar.ng-enter { + opacity: 0; } + #loading-bar.ng-enter.ng-enter-active { + opacity: 1; } + #loading-bar.ng-leave { + opacity: 1; } + #loading-bar.ng-leave.ng-leave-active { + opacity: 0; } + #loading-bar .bar { + background: #29d; + border-bottom-right-radius: 1px; + border-top-right-radius: 1px; + height: 2px; + left: 0; + position: fixed; + top: 0; + -webkit-transition: width 350ms; + transition: width 350ms; + width: 100%; + z-index: 10002; } + #loading-bar .peg { + border-radius: 100%; + -webkit-box-shadow: #29d 1px 0 6px 1px; + box-shadow: #29d 1px 0 6px 1px; + height: 2px; + opacity: .45; + position: absolute; + right: 0; + top: 0; + width: 70px; } #loading-bar-spinner { display: block; + left: 10px; + pointer-events: none; position: fixed; - z-index: 10002; top: 10px; - left: 10px; -} - -#loading-bar-spinner .spinner-icon { - width: 14px; - height: 14px; - - border: solid 2px transparent; - border-top-color: #29d; - border-left-color: #29d; - border-radius: 50%; - - -webkit-animation: loading-bar-spinner 400ms linear infinite; - -moz-animation: loading-bar-spinner 400ms linear infinite; - -ms-animation: loading-bar-spinner 400ms linear infinite; - -o-animation: loading-bar-spinner 400ms linear infinite; - animation: loading-bar-spinner 400ms linear infinite; -} + -webkit-transition: 350ms linear all; + transition: 350ms linear all; + z-index: 10002; } + #loading-bar-spinner.ng-enter { + opacity: 0; } + #loading-bar-spinner.ng-enter.ng-enter-active { + opacity: 1; } + #loading-bar-spinner.ng-leave { + opacity: 1; } + #loading-bar-spinner.ng-leave.ng-leave-active { + opacity: 0; } + #loading-bar-spinner .spinner-icon { + -webkit-animation: loading-bar-spinner 400ms linear infinite; + animation: loading-bar-spinner 400ms linear infinite; + border: solid 2px transparent; + border-left-color: #29d; + border-radius: 50%; + border-top-color: #29d; + height: 14px; + width: 14px; } @-webkit-keyframes loading-bar-spinner { - 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } - 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } -} -@-moz-keyframes loading-bar-spinner { - 0% { -moz-transform: rotate(0deg); transform: rotate(0deg); } - 100% { -moz-transform: rotate(360deg); transform: rotate(360deg); } -} -@-o-keyframes loading-bar-spinner { - 0% { -o-transform: rotate(0deg); transform: rotate(0deg); } - 100% { -o-transform: rotate(360deg); transform: rotate(360deg); } -} -@-ms-keyframes loading-bar-spinner { - 0% { -ms-transform: rotate(0deg); transform: rotate(0deg); } - 100% { -ms-transform: rotate(360deg); transform: rotate(360deg); } -} + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); } + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); } } + @keyframes loading-bar-spinner { - 0% { transform: rotate(0deg); } - 100% { transform: rotate(360deg); } -} + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); } + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); } } diff --git a/build/loading-bar.js b/build/loading-bar.js index 01630c0..59b89f1 100644 --- a/build/loading-bar.js +++ b/build/loading-bar.js @@ -1,7 +1,7 @@ /*! * angular-loading-bar v0.9.0 * https://chieffancypants.github.io/angular-loading-bar - * Copyright (c) 2016 Wes Cruver + * Copyright (c) 2017 Wes Cruver * License: MIT */ /* diff --git a/build/loading-bar.min.css b/build/loading-bar.min.css index 0f9f106..923f372 100644 --- a/build/loading-bar.min.css +++ b/build/loading-bar.min.css @@ -1 +1 @@ -#loading-bar,#loading-bar-spinner{pointer-events:none;-webkit-pointer-events:none;-webkit-transition:350ms linear all;-moz-transition:350ms linear all;-o-transition:350ms linear all;transition:350ms linear all}#loading-bar-spinner.ng-enter,#loading-bar-spinner.ng-leave.ng-leave-active,#loading-bar.ng-enter,#loading-bar.ng-leave.ng-leave-active{opacity:0}#loading-bar-spinner.ng-enter.ng-enter-active,#loading-bar-spinner.ng-leave,#loading-bar.ng-enter.ng-enter-active,#loading-bar.ng-leave{opacity:1}#loading-bar .bar{-webkit-transition:width 350ms;-moz-transition:width 350ms;-o-transition:width 350ms;transition:width 350ms;background:#29d;position:fixed;z-index:10002;top:0;left:0;width:100%;height:2px;border-bottom-right-radius:1px;border-top-right-radius:1px}#loading-bar .peg{position:absolute;width:70px;right:0;top:0;height:2px;opacity:.45;-moz-box-shadow:#29d 1px 0 6px 1px;-ms-box-shadow:#29d 1px 0 6px 1px;-webkit-box-shadow:#29d 1px 0 6px 1px;box-shadow:#29d 1px 0 6px 1px;-moz-border-radius:100%;-webkit-border-radius:100%;border-radius:100%}#loading-bar-spinner{display:block;position:fixed;z-index:10002;top:10px;left:10px}#loading-bar-spinner .spinner-icon{width:14px;height:14px;border:2px solid transparent;border-top-color:#29d;border-left-color:#29d;border-radius:50%;-webkit-animation:loading-bar-spinner 400ms linear infinite;-moz-animation:loading-bar-spinner 400ms linear infinite;-ms-animation:loading-bar-spinner 400ms linear infinite;-o-animation:loading-bar-spinner 400ms linear infinite;animation:loading-bar-spinner 400ms linear infinite}@-webkit-keyframes loading-bar-spinner{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-moz-keyframes loading-bar-spinner{0%{-moz-transform:rotate(0);transform:rotate(0)}100%{-moz-transform:rotate(360deg);transform:rotate(360deg)}}@-o-keyframes loading-bar-spinner{0%{-o-transform:rotate(0);transform:rotate(0)}100%{-o-transform:rotate(360deg);transform:rotate(360deg)}}@-ms-keyframes loading-bar-spinner{0%{-ms-transform:rotate(0);transform:rotate(0)}100%{-ms-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes loading-bar-spinner{0%{transform:rotate(0)}100%{transform:rotate(360deg)}} \ No newline at end of file +#loading-bar{pointer-events:none;-webkit-transition:350ms linear all;transition:350ms linear all}#loading-bar.ng-enter{opacity:0}#loading-bar.ng-enter.ng-enter-active{opacity:1}#loading-bar.ng-leave{opacity:1}#loading-bar.ng-leave.ng-leave-active{opacity:0}#loading-bar .bar{background:#29d;border-bottom-right-radius:1px;border-top-right-radius:1px;height:2px;left:0;position:fixed;top:0;-webkit-transition:width 350ms;transition:width 350ms;width:100%;z-index:10002}#loading-bar .peg{border-radius:100%;-webkit-box-shadow:#29d 1px 0 6px 1px;box-shadow:#29d 1px 0 6px 1px;height:2px;opacity:.45;position:absolute;right:0;top:0;width:70px}#loading-bar-spinner{display:block;left:10px;pointer-events:none;position:fixed;top:10px;-webkit-transition:350ms linear all;transition:350ms linear all;z-index:10002}#loading-bar-spinner.ng-enter{opacity:0}#loading-bar-spinner.ng-enter.ng-enter-active{opacity:1}#loading-bar-spinner.ng-leave{opacity:1}#loading-bar-spinner.ng-leave.ng-leave-active{opacity:0}#loading-bar-spinner .spinner-icon{-webkit-animation:loading-bar-spinner .4s linear infinite;animation:loading-bar-spinner .4s linear infinite;border:solid 2px transparent;border-left-color:#29d;border-radius:50%;border-top-color:#29d;height:14px;width:14px}@-webkit-keyframes loading-bar-spinner{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes loading-bar-spinner{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}} \ No newline at end of file diff --git a/build/loading-bar.min.js b/build/loading-bar.min.js index e4b18ad..feace86 100644 --- a/build/loading-bar.min.js +++ b/build/loading-bar.min.js @@ -1,7 +1,8 @@ /*! * angular-loading-bar v0.9.0 * https://chieffancypants.github.io/angular-loading-bar - * Copyright (c) 2016 Wes Cruver + * Copyright (c) 2017 Wes Cruver * License: MIT */ -!function(){"use strict";angular.module("angular-loading-bar",["cfp.loadingBarInterceptor"]),angular.module("chieffancypants.loadingBar",["cfp.loadingBarInterceptor"]),angular.module("cfp.loadingBarInterceptor",["cfp.loadingBar"]).config(["$httpProvider",function(a){var b=["$q","$cacheFactory","$timeout","$rootScope","$log","cfpLoadingBar",function(b,c,d,e,f,g){function h(){d.cancel(j),g.complete(),l=0,k=0}function i(b){var d,e=c.get("$http"),f=a.defaults;!b.cache&&!f.cache||b.cache===!1||"GET"!==b.method&&"JSONP"!==b.method||(d=angular.isObject(b.cache)?b.cache:angular.isObject(f.cache)?f.cache:e);var g=void 0!==d?void 0!==d.get(b.url):!1;return void 0!==b.cached&&g!==b.cached?b.cached:(b.cached=g,g)}var j,k=0,l=0,m=g.latencyThreshold;return{request:function(a){return a.ignoreLoadingBar||i(a)||(e.$broadcast("cfpLoadingBar:loading",{url:a.url}),0===k&&(j=d(function(){g.start()},m)),k++,g.set(l/k)),a},response:function(a){return a&&a.config?(a.config.ignoreLoadingBar||i(a.config)||(l++,l>=k?(e.$broadcast("cfpLoadingBar:loaded",{url:a.config.url,result:a}),h()):g.set(l/k)),a):(f.error("Broken interceptor detected: Config object not supplied in response:\n https://github.com/chieffancypants/angular-loading-bar/pull/50"),a)},responseError:function(a){return a&&a.config?(a.config.ignoreLoadingBar||i(a.config)||(l++,l>=k?(e.$broadcast("cfpLoadingBar:loaded",{url:a.config.url,result:a}),h()):g.set(l/k)),b.reject(a)):(f.error("Broken interceptor detected: Config object not supplied in rejection:\n https://github.com/chieffancypants/angular-loading-bar/pull/50"),b.reject(a))}}}];a.interceptors.push(b)}]),angular.module("cfp.loadingBar",[]).provider("cfpLoadingBar",function(){this.autoIncrement=!0,this.includeSpinner=!0,this.includeBar=!0,this.latencyThreshold=100,this.startSize=.02,this.parentSelector="body",this.spinnerTemplate='
',this.loadingBarTemplate='
',this.$get=["$injector","$document","$timeout","$rootScope",function(a,b,c,d){function e(){if(k||(k=a.get("$animate")),c.cancel(m),!r){var e=b[0],g=e.querySelector?e.querySelector(n):b.find(n)[0];g||(g=e.getElementsByTagName("body")[0]);var h=angular.element(g),i=g.lastChild&&angular.element(g.lastChild);d.$broadcast("cfpLoadingBar:started"),r=!0,v&&k.enter(o,h,i),u&&k.enter(q,h,o),f(w)}}function f(a){if(r){var b=100*a+"%";p.css("width",b),s=a,t&&(c.cancel(l),l=c(function(){g()},250))}}function g(){if(!(h()>=1)){var a=0,b=h();a=b>=0&&.25>b?(3*Math.random()+3)/100:b>=.25&&.65>b?3*Math.random()/100:b>=.65&&.9>b?2*Math.random()/100:b>=.9&&.99>b?.005:0;var c=h()+a;f(c)}}function h(){return s}function i(){s=0,r=!1}function j(){k||(k=a.get("$animate")),f(1),c.cancel(m),m=c(function(){var a=k.leave(o,i);a&&a.then&&a.then(i),k.leave(q),d.$broadcast("cfpLoadingBar:completed")},500)}var k,l,m,n=this.parentSelector,o=angular.element(this.loadingBarTemplate),p=o.find("div").eq(0),q=angular.element(this.spinnerTemplate),r=!1,s=0,t=this.autoIncrement,u=this.includeSpinner,v=this.includeBar,w=this.startSize;return{start:e,set:f,status:h,inc:g,complete:j,autoIncrement:this.autoIncrement,includeSpinner:this.includeSpinner,latencyThreshold:this.latencyThreshold,parentSelector:this.parentSelector,startSize:this.startSize}}]})}(); \ No newline at end of file + +!function(){"use strict";angular.module("angular-loading-bar",["cfp.loadingBarInterceptor"]),angular.module("chieffancypants.loadingBar",["cfp.loadingBarInterceptor"]),angular.module("cfp.loadingBarInterceptor",["cfp.loadingBar"]).config(["$httpProvider",function(e){var n=["$q","$cacheFactory","$timeout","$rootScope","$log","cfpLoadingBar",function(n,t,a,r,i,c){function o(){a.cancel(d),c.complete(),u=0,s=0}function l(n){var a,r=t.get("$http"),i=e.defaults;!n.cache&&!i.cache||!1===n.cache||"GET"!==n.method&&"JSONP"!==n.method||(a=angular.isObject(n.cache)?n.cache:angular.isObject(i.cache)?i.cache:r);var c=void 0!==a&&void 0!==a.get(n.url);return void 0!==n.cached&&c!==n.cached?n.cached:(n.cached=c,c)}var d,s=0,u=0,g=c.latencyThreshold;return{request:function(e){return e.ignoreLoadingBar||l(e)||(r.$broadcast("cfpLoadingBar:loading",{url:e.url}),0===s&&(d=a(function(){c.start()},g)),s++,c.set(u/s)),e},response:function(e){return e&&e.config?(e.config.ignoreLoadingBar||l(e.config)||(++u>=s?(r.$broadcast("cfpLoadingBar:loaded",{url:e.config.url,result:e}),o()):c.set(u/s)),e):(i.error("Broken interceptor detected: Config object not supplied in response:\n https://github.com/chieffancypants/angular-loading-bar/pull/50"),e)},responseError:function(e){return e&&e.config?(e.config.ignoreLoadingBar||l(e.config)||(++u>=s?(r.$broadcast("cfpLoadingBar:loaded",{url:e.config.url,result:e}),o()):c.set(u/s)),n.reject(e)):(i.error("Broken interceptor detected: Config object not supplied in rejection:\n https://github.com/chieffancypants/angular-loading-bar/pull/50"),n.reject(e))}}}];e.interceptors.push(n)}]),angular.module("cfp.loadingBar",[]).provider("cfpLoadingBar",function(){this.autoIncrement=!0,this.includeSpinner=!0,this.includeBar=!0,this.latencyThreshold=100,this.startSize=.02,this.parentSelector="body",this.spinnerTemplate='
',this.loadingBarTemplate='
',this.$get=["$injector","$document","$timeout","$rootScope",function(e,n,t,a){function r(){if(s||(s=e.get("$animate")),t.cancel(g),!v){var r=n[0],c=r.querySelector?r.querySelector(h):n.find(h)[0];c||(c=r.getElementsByTagName("body")[0]);var o=angular.element(c),l=c.lastChild&&angular.element(c.lastChild);a.$broadcast("cfpLoadingBar:started"),v=!0,S&&s.enter(p,o,l),$&&s.enter(m,o,p),i(y)}}function i(e){if(v){var n=100*e+"%";f.css("width",n),B=e,b&&(t.cancel(u),u=t(function(){c()},250))}}function c(){if(!(o()>=1)){var e=0,n=o();e=n>=0&&n<.25?(3*Math.random()+3)/100:n>=.25&&n<.65?3*Math.random()/100:n>=.65&&n<.9?2*Math.random()/100:n>=.9&&n<.99?.005:0,i(o()+e)}}function o(){return B}function l(){B=0,v=!1}function d(){s||(s=e.get("$animate")),i(1),t.cancel(g),g=t(function(){var e=s.leave(p,l);e&&e.then&&e.then(l),s.leave(m),a.$broadcast("cfpLoadingBar:completed")},500)}var s,u,g,h=this.parentSelector,p=angular.element(this.loadingBarTemplate),f=p.find("div").eq(0),m=angular.element(this.spinnerTemplate),v=!1,B=0,b=this.autoIncrement,$=this.includeSpinner,S=this.includeBar,y=this.startSize;return{start:r,set:i,status:o,inc:c,complete:d,autoIncrement:this.autoIncrement,includeSpinner:this.includeSpinner,latencyThreshold:this.latencyThreshold,parentSelector:this.parentSelector,startSize:this.startSize}}]})}(); \ No newline at end of file diff --git a/example/index.html b/example/index.html index ba46e39..b52ffec 100644 --- a/example/index.html +++ b/example/index.html @@ -7,7 +7,7 @@ - + diff --git a/package.json b/package.json index 6529008..fd206d9 100644 --- a/package.json +++ b/package.json @@ -31,16 +31,21 @@ }, "homepage": "https://chieffancypants.github.io/angular-loading-bar", "devDependencies": { - "karma-jasmine": "^0.1.3", - "karma-coffee-preprocessor": "^0.2.0", - "karma-phantomjs-launcher": "^0.1.0", - "karma": "~0.12.0", - "karma-coverage": "^0.1.0", - "grunt": "~0.4.1", - "grunt-contrib-jshint": "~0.6.4", - "grunt-contrib-uglify": "^0.9.1", - "grunt-contrib-cssmin": "~0.12.0", - "grunt-karma": "~0.11.0", - "grunt-contrib-concat": "^0.5.0" + "autoprefixer": "^7.1.1", + "grunt": "^1.0.1", + "grunt-contrib-concat": "^1.0.1", + "grunt-contrib-cssmin": "^2.2.0", + "grunt-contrib-jshint": "^1.1.0", + "grunt-contrib-uglify": "^3.0.0", + "grunt-karma": "^2.0.0", + "grunt-postcss": "^0.8.0", + "grunt-sass": "^2.0.0", + "grunt-sass-lint": "^0.2.2", + "jasmine-core": "^2.6.2", + "karma": "^1.7.0", + "karma-coffee-preprocessor": "^1.0.1", + "karma-coverage": "^1.1.1", + "karma-jasmine": "^1.1.0", + "karma-phantomjs-launcher": "^1.0.4" } } diff --git a/sass-lint.yml b/sass-lint.yml new file mode 100644 index 0000000..6e1b46f --- /dev/null +++ b/sass-lint.yml @@ -0,0 +1,6 @@ +options: + formatter: stylish + merge-default-rules: true +rules: + no-ids: 0 + no-transition-all: 0 diff --git a/src/loading-bar.css b/src/loading-bar.css deleted file mode 100644 index 3ee0618..0000000 --- a/src/loading-bar.css +++ /dev/null @@ -1,104 +0,0 @@ - -/* Make clicks pass-through */ -#loading-bar, -#loading-bar-spinner { - pointer-events: none; - -webkit-pointer-events: none; - -webkit-transition: 350ms linear all; - -moz-transition: 350ms linear all; - -o-transition: 350ms linear all; - transition: 350ms linear all; -} - -#loading-bar.ng-enter, -#loading-bar.ng-leave.ng-leave-active, -#loading-bar-spinner.ng-enter, -#loading-bar-spinner.ng-leave.ng-leave-active { - opacity: 0; -} - -#loading-bar.ng-enter.ng-enter-active, -#loading-bar.ng-leave, -#loading-bar-spinner.ng-enter.ng-enter-active, -#loading-bar-spinner.ng-leave { - opacity: 1; -} - -#loading-bar .bar { - -webkit-transition: width 350ms; - -moz-transition: width 350ms; - -o-transition: width 350ms; - transition: width 350ms; - - background: #29d; - position: fixed; - z-index: 10002; - top: 0; - left: 0; - width: 100%; - height: 2px; - border-bottom-right-radius: 1px; - border-top-right-radius: 1px; -} - -/* Fancy blur effect */ -#loading-bar .peg { - position: absolute; - width: 70px; - right: 0; - top: 0; - height: 2px; - opacity: .45; - -moz-box-shadow: #29d 1px 0 6px 1px; - -ms-box-shadow: #29d 1px 0 6px 1px; - -webkit-box-shadow: #29d 1px 0 6px 1px; - box-shadow: #29d 1px 0 6px 1px; - -moz-border-radius: 100%; - -webkit-border-radius: 100%; - border-radius: 100%; -} - -#loading-bar-spinner { - display: block; - position: fixed; - z-index: 10002; - top: 10px; - left: 10px; -} - -#loading-bar-spinner .spinner-icon { - width: 14px; - height: 14px; - - border: solid 2px transparent; - border-top-color: #29d; - border-left-color: #29d; - border-radius: 50%; - - -webkit-animation: loading-bar-spinner 400ms linear infinite; - -moz-animation: loading-bar-spinner 400ms linear infinite; - -ms-animation: loading-bar-spinner 400ms linear infinite; - -o-animation: loading-bar-spinner 400ms linear infinite; - animation: loading-bar-spinner 400ms linear infinite; -} - -@-webkit-keyframes loading-bar-spinner { - 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } - 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } -} -@-moz-keyframes loading-bar-spinner { - 0% { -moz-transform: rotate(0deg); transform: rotate(0deg); } - 100% { -moz-transform: rotate(360deg); transform: rotate(360deg); } -} -@-o-keyframes loading-bar-spinner { - 0% { -o-transform: rotate(0deg); transform: rotate(0deg); } - 100% { -o-transform: rotate(360deg); transform: rotate(360deg); } -} -@-ms-keyframes loading-bar-spinner { - 0% { -ms-transform: rotate(0deg); transform: rotate(0deg); } - 100% { -ms-transform: rotate(360deg); transform: rotate(360deg); } -} -@keyframes loading-bar-spinner { - 0% { transform: rotate(0deg); } - 100% { transform: rotate(360deg); } -} diff --git a/src/loading-bar.scss b/src/loading-bar.scss new file mode 100644 index 0000000..14aa16d --- /dev/null +++ b/src/loading-bar.scss @@ -0,0 +1,86 @@ +$loading-bar-color: #29d !default; + +#loading-bar { + pointer-events: none; + transition: 350ms linear all; + + &.ng-enter { + opacity: 0; + + &.ng-enter-active { + opacity: 1; + } + } + + &.ng-leave { + opacity: 1; + + &.ng-leave-active { + opacity: 0; + } + } + + .bar { + background: $loading-bar-color; + border-bottom-right-radius: 1px; + border-top-right-radius: 1px; + height: 2px; + left: 0; + position: fixed; + top: 0; + transition: width 350ms; + width: 100%; + z-index: 10002; + } + + .peg { + border-radius: 100%; + box-shadow: $loading-bar-color 1px 0 6px 1px; + height: 2px; + opacity: .45; + position: absolute; + right: 0; + top: 0; + width: 70px; + } +} + +#loading-bar-spinner { + display: block; + left: 10px; + pointer-events: none; + position: fixed; + top: 10px; + transition: 350ms linear all; + z-index: 10002; + + &.ng-enter { + opacity: 0; + + &.ng-enter-active { + opacity: 1; + } + } + + &.ng-leave { + opacity: 1; + + &.ng-leave-active { + opacity: 0; + } + } + + .spinner-icon { + animation: loading-bar-spinner 400ms linear infinite; + border: solid 2px transparent; + border-left-color: $loading-bar-color; + border-radius: 50%; + border-top-color: $loading-bar-color; + height: 14px; + width: 14px; + } +} +@keyframes loading-bar-spinner { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} diff --git a/test/loading-bar-interceptor-config.coffee b/test/loading-bar-interceptor-config.coffee index f29ab1e..b33cd8d 100644 --- a/test/loading-bar-interceptor-config.coffee +++ b/test/loading-bar-interceptor-config.coffee @@ -44,28 +44,27 @@ describe 'loadingBarInterceptor Service - config options', -> cfpLoadingBar.complete() $timeout.flush() - it 'should not auto increment loadingBar if configured', (done) -> - module 'chieffancypants.loadingBar', (cfpLoadingBarProvider) -> - cfpLoadingBarProvider.autoIncrement = false - return - inject ($timeout, cfpLoadingBar) -> - flag = false - cfpLoadingBar.start() - cfpLoadingBar.set(.5) - runs -> + describe 'loadingBarInterceptor Service - config options, async tests', -> + beforeEach (done) -> + module 'chieffancypants.loadingBar', (cfpLoadingBarProvider) -> + cfpLoadingBarProvider.autoIncrement = false + return + inject ($timeout, cfpLoadingBar) -> + cfpLoadingBar.start() + cfpLoadingBar.set(.5) setTimeout -> - flag = true + done() , 500 - waitsFor -> - return flag - , "500ms timeout" - , 1000 + it 'should not auto increment loadingBar if configured', (done) -> + inject ($timeout, cfpLoadingBar) -> + setTimeout -> + expect(cfpLoadingBar.status()).toBe .5; + cfpLoadingBar.complete(); + $timeout.flush(); + done(); + , 500 - runs -> - expect(cfpLoadingBar.status()).toBe .5; - cfpLoadingBar.complete() - $timeout.flush() it 'should auto increment loadingBar if configured', -> module 'chieffancypants.loadingBar', (cfpLoadingBarProvider) -> diff --git a/test/loading-bar-interceptor.coffee b/test/loading-bar-interceptor.coffee index 241967f..e3026fe 100644 --- a/test/loading-bar-interceptor.coffee +++ b/test/loading-bar-interceptor.coffee @@ -34,13 +34,21 @@ describe 'loadingBarInterceptor Service', -> $animate.triggerCallbacks && $animate.triggerCallbacks() beforeEach -> - this.addMatchers - toBeBetween: (high, low) -> - if low > high - temp = low - low = high - high = temp - return this.actual > low && this.actual < high + jasmine.addMatchers + toBeBetween: () -> + return compare: (actual, high, low) -> + if low > high + temp = low + low = high + high = temp + passed = actual > low && actual < high + result = + pass: + passed + message: + 'expected ' + actual + ' to ' + (if passed then 'not ' else '') + 'be between ' + low + ' and ' + high + return result + afterEach ->