status-im/consul
2
0
Fork 0
mirror of https://github.com/status-im/consul.git synced 2025-01-09 13:26:07 +00:00
Code Issues Projects Releases Wiki Activity

ui: loading

Browse Source
This commit is contained in:
Jack Pearkes 2014-05-01 11:56:56 -04:00
parent 0c77661285
commit 2d4d77f486
3 changed files with 12 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
ui/index.html
View File

@ -37,6 +37,17 @@
</div>
</script>
<script type="text/x-handlebars" data-template-name="loading">
<div class="row">
<div class="col-md-8 col-md-offset-2 col-sm-12 col-xs-12">
<div class="text-center vertical-center">
<img src="static/loading-cylon-purple.svg" width="384" height="48">
<p><small>Loading...</small></p>
</div>
</div>
</div>
</script>
<script type="text/x-handlebars" data-template-name="dc">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12 topbar">

14
ui/static/loading-bubbles.svg
View File

@ -1,14 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="black">
<circle transform="translate(8 0)" cx="0" cy="16" r="0">
<animate attributeName="r" values="0; 4; 0; 0" dur="1.2s" repeatCount="indefinite" begin="0"
keytimes="0;0.2;0.7;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.6 0.4 0.8" calcMode="spline" />
</circle>
<circle transform="translate(16 0)" cx="0" cy="16" r="0">
<animate attributeName="r" values="0; 4; 0; 0" dur="1.2s" repeatCount="indefinite" begin="0.3"
keytimes="0;0.2;0.7;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.6 0.4 0.8" calcMode="spline" />
</circle>
<circle transform="translate(24 0)" cx="0" cy="16" r="0">
<animate attributeName="r" values="0; 4; 0; 0" dur="1.2s" repeatCount="indefinite" begin="0.6"
keytimes="0;0.2;0.7;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.6 0.4 0.8" calcMode="spline" />
</circle>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 947 B

2
ui/static/loading-cylon-red.svg → ui/static/loading-cylon-purple.svg
View File

@ -1,4 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 14 32 18" width="32" height="4" fill="#f20" preserveAspectRatio="none">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 14 32 18" width="32" height="4" fill="#9e84c5" preserveAspectRatio="none">
<path opacity="0.8" transform="translate(0 0)" d="M2 14 V18 H6 V14z">
<animateTransform attributeName="transform" type="translate" values="0 0; 24 0; 0 0" dur="2s" begin="0" repeatCount="indefinite" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline" />
</path>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 980 B

After

Width:  |  Height:  |  Size: 983 B