raggedstaff/openfoodnetwork
1
0
Fork 0
mirror of https://github.com/openfoodfoundation/openfoodnetwork synced 2026-01-24 20:36:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Adding new loading animation to replace ugly and large gif

Browse Source
This commit is contained in:
summerscope
2015-01-16 17:06:40 +11:00
parent 0f8809abfc
commit 1753432f36
7 changed files with 61 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
app/assets/images/loading.gif
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 44 KiB

55
app/assets/images/spinning-circles.svg Executable file
View File

@@ -0,0 +1,55 @@
<!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
<svg width="58" height="58" viewBox="0 0 58 58" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd">
<g transform="translate(2 1)" stroke="#0096ad" stroke-width="1.5">
<circle cx="42.601" cy="11.462" r="5" fill-opacity="1" fill="#0096ad">
<animate attributeName="fill-opacity"
begin="0s" dur="1.3s"
values="1;0;0;0;0;0;0;0" calcMode="linear"
repeatCount="indefinite" />
</circle>
<circle cx="49.063" cy="27.063" r="5" fill-opacity="0" fill="#0096ad">
<animate attributeName="fill-opacity"
begin="0s" dur="1.3s"
values="0;1;0;0;0;0;0;0" calcMode="linear"
repeatCount="indefinite" />
</circle>
<circle cx="42.601" cy="42.663" r="5" fill-opacity="0" fill="#0096ad">
<animate attributeName="fill-opacity"
begin="0s" dur="1.3s"
values="0;0;1;0;0;0;0;0" calcMode="linear"
repeatCount="indefinite" />
</circle>
<circle cx="27" cy="49.125" r="5" fill-opacity="0" fill="#0096ad">
<animate attributeName="fill-opacity"
begin="0s" dur="1.3s"
values="0;0;0;1;0;0;0;0" calcMode="linear"
repeatCount="indefinite" />
</circle>
<circle cx="11.399" cy="42.663" r="5" fill-opacity="0" fill="#0096ad">
<animate attributeName="fill-opacity"
begin="0s" dur="1.3s"
values="0;0;0;0;1;0;0;0" calcMode="linear"
repeatCount="indefinite" />
</circle>
<circle cx="4.938" cy="27.063" r="5" fill-opacity="0" fill="#0096ad">
<animate attributeName="fill-opacity"
begin="0s" dur="1.3s"
values="0;0;0;0;0;1;0;0" calcMode="linear"
repeatCount="indefinite" />
</circle>
<circle cx="11.399" cy="11.462" r="5" fill-opacity="0" fill="#0096ad">
<animate attributeName="fill-opacity"
begin="0s" dur="1.3s"
values="0;0;0;0;0;0;1;0" calcMode="linear"
repeatCount="indefinite" />
</circle>
<circle cx="27" cy="5" r="5" fill-opacity="0" fill="#0096ad">
<animate attributeName="fill-opacity"
begin="0s" dur="1.3s"
values="0;0;0;0;0;0;0;1" calcMode="linear"
repeatCount="indefinite" />
</circle>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

2
app/assets/javascripts/templates/registration/images/logo.html.haml
View File

@@ -40,6 +40,6 @@
.message{ ng: { hide: "imageSrc() || imageUploader.isUploading" } }
Your logo will appear here for review once uploaded
.loading{ ng: { hide: "!imageUploader.isUploading" } }
%img.spinner{ src: "/assets/loading.gif" }
%img.spinner{ src: "/assets/spinning-circles.svg" }
%br/
Uploading...

2
app/assets/javascripts/templates/registration/images/promo.html.haml
View File

@@ -38,6 +38,6 @@
.message{ ng: { hide: "imageSrc() || imageUploader.isUploading" } }
Your logo will appear here for review once uploaded
.loading{ ng: { hide: "!imageUploader.isUploading" } }
%img.spinner{ src: "/assets/loading.gif" }
%img.spinner{ src: "/assets/spinning-circles.svg" }
%br/
Uploading...

4
app/views/shop/products/_form.html.haml
View File

@@ -26,10 +26,10 @@
%product{"ng-show" => "Products.loading"}
.row.summary
.small-12.columns.text-center
Loading products
Loading products...
.row
.small-12.columns.text-center
%img.spinner{ src: "/assets/loading.gif" }
%img.spinner{ src: "/assets/spinning-circles.svg" }
%div{"ng-show" => "filteredProducts.length == 0 && !Products.loading"}
.row.summary

2
app/views/spree/admin/orders/bulk_management.html.haml
View File

@@ -95,7 +95,7 @@
%span{ :class => 'one column alpha', :style => 'text-align: center'} {{ column.visible && "&#10003;" || !column.visible && "&nbsp;" }}
%span{ :class => 'two columns omega' } {{column.name }}
%div.sixteen.columns.alpha#loading{ 'ng-if' => 'loading' }
%img.spinner{ src: "/assets/loading.gif" }
%img.spinner{ src: "/assets/spinning-circles.svg" }
%h1 LOADING ORDERS
%div{ :class => "sixteen columns alpha", 'ng-show' => '!loading && filteredLineItems.length == 0'}
%h1#no_results No orders found.

2
app/views/spree/admin/products/bulk_edit/_indicators.html.haml
View File

@@ -2,7 +2,7 @@
{{ api_error_msg }}
%div.sixteen.columns.alpha#loading{ 'ng-if' => 'loading' }
%img.spinner{ src: "/assets/loading.gif" }
%img.spinner{ src: "/assets/spinning-circles.svg" }
%h1 LOADING PRODUCTS
%div.sixteen.columns.alpha{ 'ng-show' => '!loading && filteredProducts.length == 0 && query.length==0' }