diff options
| -rw-r--r-- | www/index.html | 15 | ||||
| -rw-r--r-- | www/js/jingles.js | 10 | ||||
| -rw-r--r-- | www/styles/main-style.css | 135 |
3 files changed, 154 insertions, 6 deletions
diff --git a/www/index.html b/www/index.html index 563a63d..7b63a38 100644 --- a/www/index.html +++ b/www/index.html @@ -388,6 +388,21 @@ </tr> </table> + <div class="sk-fading-circle spinnerTemplate"> + <div class="sk-circle1 sk-circle"></div> + <div class="sk-circle2 sk-circle"></div> + <div class="sk-circle3 sk-circle"></div> + <div class="sk-circle4 sk-circle"></div> + <div class="sk-circle5 sk-circle"></div> + <div class="sk-circle6 sk-circle"></div> + <div class="sk-circle7 sk-circle"></div> + <div class="sk-circle8 sk-circle"></div> + <div class="sk-circle9 sk-circle"></div> + <div class="sk-circle10 sk-circle"></div> + <div class="sk-circle11 sk-circle"></div> + <div class="sk-circle12 sk-circle"></div> + </div> + </div> </div> diff --git a/www/js/jingles.js b/www/js/jingles.js index fb36934..86c1553 100644 --- a/www/js/jingles.js +++ b/www/js/jingles.js @@ -164,6 +164,7 @@ Rivendell.JingleCartView = function(model, groupView, active) { Rivendell.JingleCutView = function(model) { this.model = model; + this.$spinner = null; this.$el = null; this.render(); @@ -193,6 +194,9 @@ Rivendell.JingleCutView.prototype.render = function() { self.delete(); }); + this.$spinner = $('#hiddenTemplates .spinnerTemplate').clone().removeClass('spinnerTemplate'); + + this.$el = $('<tr>') .attr('id', 'jingle-' + this.model.cartNumber + '-' + this.model.number) .append($('<td>').append(status)) @@ -209,7 +213,7 @@ Rivendell.JingleCutView.prototype.render = function() { }; Rivendell.JingleCutView.prototype.move = function() { - this.$el.find('td:first').html('<span class="label label-default"><span class="glyphicon glyphicon-repeat spin"></span></span>') + this.$el.find('td:first').html(this.$spinner); var self = this; var destinationCart = this.model.cartNumber; @@ -238,7 +242,7 @@ Rivendell.JingleCutView.prototype.move = function() { }; Rivendell.JingleCutView.prototype.toggleActive = function() { - this.$el.find('td:first').html('<span class="label label-default"><span class="glyphicon glyphicon-repeat spin"></span></span>') + this.$el.find('td:first').html(this.$spinner); var destinationCart = this.model.cartNumber; if (this.model.active) { destinationCart++; @@ -252,7 +256,7 @@ Rivendell.JingleCutView.prototype.toggleActive = function() { }; Rivendell.JingleCutView.prototype.delete = function() { - this.$el.find('td:first').html('<span class="label label-default"><span class="glyphicon glyphicon-repeat spin"></span></span>') + this.$el.find('td:first').html(this.$spinner); var self = this; rivendell.removeCut(this.model.cartNumber, this.model.number, function() { self.model.cart.removeCut(self.model); diff --git a/www/styles/main-style.css b/www/styles/main-style.css index 5b8c5db..fc7e357 100644 --- a/www/styles/main-style.css +++ b/www/styles/main-style.css @@ -98,8 +98,137 @@ body { text-align: center; } -.spin { - animation: spin 2s linear infinite; +.sk-fading-circle { + width: 15px; + height: 15px; + position: relative; } -@keyframes spin { 100% { transform:rotate(360deg); } } +.sk-fading-circle .sk-circle { + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; +} + +.sk-fading-circle .sk-circle:before { + content: ''; + display: block; + margin: 0 auto; + width: 15%; + height: 15%; + background-color: #333; + border-radius: 100%; + -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both; + animation: sk-circleFadeDelay 1.2s infinite ease-in-out both; +} +.sk-fading-circle .sk-circle2 { + -webkit-transform: rotate(30deg); + -ms-transform: rotate(30deg); + transform: rotate(30deg); +} +.sk-fading-circle .sk-circle3 { + -webkit-transform: rotate(60deg); + -ms-transform: rotate(60deg); + transform: rotate(60deg); +} +.sk-fading-circle .sk-circle4 { + -webkit-transform: rotate(90deg); + -ms-transform: rotate(90deg); + transform: rotate(90deg); +} +.sk-fading-circle .sk-circle5 { + -webkit-transform: rotate(120deg); + -ms-transform: rotate(120deg); + transform: rotate(120deg); +} +.sk-fading-circle .sk-circle6 { + -webkit-transform: rotate(150deg); + -ms-transform: rotate(150deg); + transform: rotate(150deg); +} +.sk-fading-circle .sk-circle7 { + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); +} +.sk-fading-circle .sk-circle8 { + -webkit-transform: rotate(210deg); + -ms-transform: rotate(210deg); + transform: rotate(210deg); +} +.sk-fading-circle .sk-circle9 { + -webkit-transform: rotate(240deg); + -ms-transform: rotate(240deg); + transform: rotate(240deg); +} +.sk-fading-circle .sk-circle10 { + -webkit-transform: rotate(270deg); + -ms-transform: rotate(270deg); + transform: rotate(270deg); +} +.sk-fading-circle .sk-circle11 { + -webkit-transform: rotate(300deg); + -ms-transform: rotate(300deg); + transform: rotate(300deg); +} +.sk-fading-circle .sk-circle12 { + -webkit-transform: rotate(330deg); + -ms-transform: rotate(330deg); + transform: rotate(330deg); +} +.sk-fading-circle .sk-circle2:before { + -webkit-animation-delay: -1.1s; + animation-delay: -1.1s; +} +.sk-fading-circle .sk-circle3:before { + -webkit-animation-delay: -1s; + animation-delay: -1s; +} +.sk-fading-circle .sk-circle4:before { + -webkit-animation-delay: -0.9s; + animation-delay: -0.9s; +} +.sk-fading-circle .sk-circle5:before { + -webkit-animation-delay: -0.8s; + animation-delay: -0.8s; +} +.sk-fading-circle .sk-circle6:before { + -webkit-animation-delay: -0.7s; + animation-delay: -0.7s; +} +.sk-fading-circle .sk-circle7:before { + -webkit-animation-delay: -0.6s; + animation-delay: -0.6s; +} +.sk-fading-circle .sk-circle8:before { + -webkit-animation-delay: -0.5s; + animation-delay: -0.5s; +} +.sk-fading-circle .sk-circle9:before { + -webkit-animation-delay: -0.4s; + animation-delay: -0.4s; +} +.sk-fading-circle .sk-circle10:before { + -webkit-animation-delay: -0.3s; + animation-delay: -0.3s; +} +.sk-fading-circle .sk-circle11:before { + -webkit-animation-delay: -0.2s; + animation-delay: -0.2s; +} +.sk-fading-circle .sk-circle12:before { + -webkit-animation-delay: -0.1s; + animation-delay: -0.1s; +} + +@-webkit-keyframes sk-circleFadeDelay { + 0%, 39%, 100% { opacity: 0; } + 40% { opacity: 1; } +} + +@keyframes sk-circleFadeDelay { + 0%, 39%, 100% { opacity: 0; } + 40% { opacity: 1; } +} |