Load spinner
Signed-off-by: James Ketrenos <james_git@ketrenos.com>
This commit is contained in:
parent
b70d872859
commit
70db5290ab
@ -5,6 +5,7 @@
|
|||||||
<link rel="import" href="../bower_components/iron-icon/iron-icon.html">
|
<link rel="import" href="../bower_components/iron-icon/iron-icon.html">
|
||||||
<link rel="import" href="../bower_components/iron-icons/iron-icons.html">
|
<link rel="import" href="../bower_components/iron-icons/iron-icons.html">
|
||||||
<link rel="import" href="../bower_components/iron-pages/iron-pages.html">
|
<link rel="import" href="../bower_components/iron-pages/iron-pages.html">
|
||||||
|
<link rel="import" href="../bower_components/paper-spinner/paper-spinner.html">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<dom-module id="photo-lightbox">
|
<dom-module id="photo-lightbox">
|
||||||
@ -27,7 +28,7 @@
|
|||||||
|
|
||||||
#image {
|
#image {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
position: relative;
|
position: absolute;
|
||||||
top: 0px;
|
top: 0px;
|
||||||
left: 0px;
|
left: 0px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@ -39,9 +40,29 @@
|
|||||||
-webkit-transition: opacity 0.5s ease-in-out;
|
-webkit-transition: opacity 0.5s ease-in-out;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#overlay {
|
||||||
|
position: absolute;
|
||||||
|
top: 0px;
|
||||||
|
left: 0px;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#overlay > div {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<div id="image"></div>
|
<div id="image">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="overlay" class="layout vertical center">
|
||||||
|
<div class="layout horizontal center">
|
||||||
|
<paper-spinner hidden$="[[!loading]]" active$="[[loading]]" class="thin"></paper-spinner>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@ -54,6 +75,10 @@ Polymer({
|
|||||||
},
|
},
|
||||||
"thumb": {
|
"thumb": {
|
||||||
type: String
|
type: String
|
||||||
|
},
|
||||||
|
loading: {
|
||||||
|
type: Boolean,
|
||||||
|
value: false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
@ -163,15 +188,16 @@ Polymer({
|
|||||||
this.waitUntil = 0;
|
this.waitUntil = 0;
|
||||||
}
|
}
|
||||||
this.$.image.style.opacity = 0;
|
this.$.image.style.opacity = 0;
|
||||||
this.style.borderColor = 'orange';
|
|
||||||
|
|
||||||
this.image = new Image();
|
this.image = new Image();
|
||||||
this.loading = image;
|
this.requested = image;
|
||||||
|
this.loading = true;
|
||||||
|
|
||||||
this.image.onload = function(src) {
|
this.image.onload = function(src) {
|
||||||
|
this.loading = false;
|
||||||
var remaining = Math.max(this.waitUntil - Date.now() / 1000, 0);
|
var remaining = Math.max(this.waitUntil - Date.now() / 1000, 0);
|
||||||
this.async(function() {
|
this.async(function() {
|
||||||
if (!this.image || this.loading != src) {
|
if (!this.image || this.requested != src) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user