From c195786ffc5f547da6ee29246434cea5205381b5 Mon Sep 17 00:00:00 2001
From: Jiiks <jiiks@windowslive.com>
Date: Tue, 23 Jan 2018 09:23:15 +0200
Subject: [PATCH] add some generics and styling + new spinners

---
 .../ui/vue/components/bd/CssEditor.vue        |   4 +-
 .../components/bd/templates/CssEditor.html    |  19 +-
 .../ui/vue/components/generic/Button.vue      |   0
 .../ui/vue/components/generic/FormButton.vue  |  11 +
 .../vue/components/generic/ScrollerWrap.vue   |  12 +-
 .../vue/components/generic/SettingSwitch.vue  |  13 +-
 .../ui/vue/components/generic/index.js        |   3 +-
 .../generic/templates/ScrollerWrap.html       |   3 -
 .../generic/templates/SettingSwitch.html      |  10 -
 client/src/styles/partials/animations.scss    | 327 ------
 client/src/styles/partials/generic.scss       |  29 +-
 client/src/styles/partials/index.scss         |   1 +
 client/src/styles/partials/spinners.scss      | 942 ++++++++++++++++++
 13 files changed, 1012 insertions(+), 362 deletions(-)
 create mode 100644 client/src/modules/ui/vue/components/generic/Button.vue
 create mode 100644 client/src/modules/ui/vue/components/generic/FormButton.vue
 delete mode 100644 client/src/modules/ui/vue/components/generic/templates/ScrollerWrap.html
 delete mode 100644 client/src/modules/ui/vue/components/generic/templates/SettingSwitch.html
 create mode 100644 client/src/styles/partials/spinners.scss

diff --git a/client/src/modules/ui/vue/components/bd/CssEditor.vue b/client/src/modules/ui/vue/components/bd/CssEditor.vue
index 9fed897d..8483e383 100644
--- a/client/src/modules/ui/vue/components/bd/CssEditor.vue
+++ b/client/src/modules/ui/vue/components/bd/CssEditor.vue
@@ -5,8 +5,8 @@
 
     /*Imports*/
     import { SettingsWrapper } from './';
-    import { SettingSwitch } from '../generic';
-    const components = { SettingsWrapper, SettingSwitch };
+    import { SettingSwitch, FormButton } from '../generic';
+    const components = { SettingsWrapper, SettingSwitch, FormButton };
 
     function openInternalEditor() {
         CssEditor.show();
diff --git a/client/src/modules/ui/vue/components/bd/templates/CssEditor.html b/client/src/modules/ui/vue/components/bd/templates/CssEditor.html
index d7fb4309..dea79bfa 100644
--- a/client/src/modules/ui/vue/components/bd/templates/CssEditor.html
+++ b/client/src/modules/ui/vue/components/bd/templates/CssEditor.html
@@ -4,23 +4,30 @@
             <h5>Custom Editor</h5>
             <div class="bd-form-warning">
                 <div class="bd-text">Custom Editor is not installed!</div>
-                <div class="bd-form-button">
+                <FormButton>
                     Install
-                </div>
+                </FormButton>
             </div>
             <span style="color: #FFF; font-size: 12px; font-weight: 700;">*This is displayed if editor is not installed</span>
-            <div class="bd-form-button" @click="openInternalEditor">
+            <FormButton :onClick="openInternalEditor">
                 Open
-            </div>
+            </FormButton>
         </div>
         <div class="bd-form-divider"></div>
         <SettingSwitch :setting="dummySetting" :onClick="settingClicked"/>
         <div class="bd-form-item">
             <h5>System Editor</h5>
-            <div class="bd-form-button">
+            <FormButton>
                 Open
-            </div>
+            </FormButton>
         </div>
         <div class="bd-form-divider"></div>
+        <FormButton :onClick="settingClicked">
+            Enabled
+        </FormButton>
+        <FormButton :disabled="true">
+            <span>Disabled</span>
+        </FormButton>
+        <FormButton :loading="true"/>
     </div>
 </SettingsWrapper>
\ No newline at end of file
diff --git a/client/src/modules/ui/vue/components/generic/Button.vue b/client/src/modules/ui/vue/components/generic/Button.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/client/src/modules/ui/vue/components/generic/FormButton.vue b/client/src/modules/ui/vue/components/generic/FormButton.vue
new file mode 100644
index 00000000..e20e3f9e
--- /dev/null
+++ b/client/src/modules/ui/vue/components/generic/FormButton.vue
@@ -0,0 +1,11 @@
+<template>
+    <div class="bd-form-button bd-button" :class="{'bd-disabled': disabled}" @click="!disabled && !loading ? onClick() : null">
+        <div v-if="loading" class="bd-spinner-7"></div>
+        <slot v-else />
+    </div>
+</template>
+<script>
+    export default {
+        props: ['loading', 'disabled', 'type', 'onClick']
+    }
+</script>
\ No newline at end of file
diff --git a/client/src/modules/ui/vue/components/generic/ScrollerWrap.vue b/client/src/modules/ui/vue/components/generic/ScrollerWrap.vue
index 3ea3a8f8..932dc9e8 100644
--- a/client/src/modules/ui/vue/components/generic/ScrollerWrap.vue
+++ b/client/src/modules/ui/vue/components/generic/ScrollerWrap.vue
@@ -1,2 +1,10 @@
-<template src="./templates/ScrollerWrap.html"></template>
-<script>export default { props: ['dark'] }</script>
\ No newline at end of file
+<template>
+    <div class="bd-scroller-wrap" :class="{'bd-dark': dark}">
+        <slot />
+    </div>
+</template>
+<script>
+    export default {
+        props: ['dark']
+    }
+</script>
\ No newline at end of file
diff --git a/client/src/modules/ui/vue/components/generic/SettingSwitch.vue b/client/src/modules/ui/vue/components/generic/SettingSwitch.vue
index f98880d1..c14db968 100644
--- a/client/src/modules/ui/vue/components/generic/SettingSwitch.vue
+++ b/client/src/modules/ui/vue/components/generic/SettingSwitch.vue
@@ -1,4 +1,15 @@
-<template src="./templates/SettingSwitch.html"></template>
+<template>
+    <div class="bd-setting-switch" :class="{'bd-disabled': disabled}">
+        <div class="bd-title">
+            <h3>{{setting.title || setting.text}}</h3>
+            <label class="bd-switch-wrapper" @click="!disabled ? onClick(setting) : null">
+                <input type="checkbox" class="bd-switch-checkbox" />
+                <div class="bd-switch" :class="{'bd-checked': (setting.checked || setting.enabled)}" />
+            </label>
+        </div>
+        <div class="bd-hint">{{setting.hint}}</div>
+    </div>
+</template>
 <script>
     export default {
         props: ['setting', 'onClick', 'disabled']
diff --git a/client/src/modules/ui/vue/components/generic/index.js b/client/src/modules/ui/vue/components/generic/index.js
index 2579a6bb..3a5e1423 100644
--- a/client/src/modules/ui/vue/components/generic/index.js
+++ b/client/src/modules/ui/vue/components/generic/index.js
@@ -1,2 +1,3 @@
 export { default as ScrollerWrap } from './ScrollerWrap.vue';
-export { default as SettingSwitch } from './SettingSwitch.vue';
\ No newline at end of file
+export { default as SettingSwitch } from './SettingSwitch.vue';
+export { default as FormButton } from './FormButton.vue';
\ No newline at end of file
diff --git a/client/src/modules/ui/vue/components/generic/templates/ScrollerWrap.html b/client/src/modules/ui/vue/components/generic/templates/ScrollerWrap.html
deleted file mode 100644
index 6ce4413c..00000000
--- a/client/src/modules/ui/vue/components/generic/templates/ScrollerWrap.html
+++ /dev/null
@@ -1,3 +0,0 @@
-<div class="bd-scroller-wrap" :class="{'bd-dark': dark}">
-    <slot/>
-</div>
\ No newline at end of file
diff --git a/client/src/modules/ui/vue/components/generic/templates/SettingSwitch.html b/client/src/modules/ui/vue/components/generic/templates/SettingSwitch.html
deleted file mode 100644
index 8e10737a..00000000
--- a/client/src/modules/ui/vue/components/generic/templates/SettingSwitch.html
+++ /dev/null
@@ -1,10 +0,0 @@
-<div class="bd-setting-switch" :class="{'bd-disabled': disabled}">
-  <div class="bd-title">
-      <h3>{{setting.title || setting.text}}</h3>
-      <label class="bd-switch-wrapper" @click="!disabled ? onClick(setting) : null">
-          <input type="checkbox" class="bd-switch-checkbox"/>
-          <div class="bd-switch" :class="{'bd-checked': (setting.checked || setting.enabled)}"/>
-      </label>
-  </div>
-  <div class="bd-hint">{{setting.hint}}</div>
-</div>
\ No newline at end of file
diff --git a/client/src/styles/partials/animations.scss b/client/src/styles/partials/animations.scss
index 7a11ebf1..0052738d 100644
--- a/client/src/styles/partials/animations.scss
+++ b/client/src/styles/partials/animations.scss
@@ -68,330 +68,3 @@
         opacity: 1;
     }
 }
-
-/*SPINNERS*/
-
-/*BD-SPINNER*/
-.bd-spinner {
-    width: 40px;
-    height: 40px;
-    position: relative;
-    -webkit-animation: bd-spinner-anim3 2s cubic-bezier(0.4, 0, 0, 1) infinite;
-    animation: bd-spinner-anim3 2s cubic-bezier(0.4, 0, 0, 1) infinite;
-    backface-visibility: hidden;
-    -webkit-backface-visibility: hidden;
-}
-
-.bd-spinner::after {
-    content: "";
-    background: #fff;
-    height: 10px;
-    width: 10px;
-    position: absolute;
-    border-radius: 50%;
-    left: 5px;
-    top: 15px;
-    -webkit-animation: bd-spinner-anim1 2s cubic-bezier(0.4, 0, 0, 1) infinite;
-    animation: bd-spinner-anim1 2s cubic-bezier(0.4, 0, 0, 1) infinite;
-    backface-visibility: hidden;
-    -webkit-backface-visibility: hidden;
-}
-
-.bd-spinner::before {
-    content: "";
-    background: #fff;
-    height: 10px;
-    width: 10px;
-    position: absolute;
-    border-radius: 50%;
-    right: 5px;
-    top: 15px;
-    -webkit-animation: bd-spinner-anim2 2s cubic-bezier(0.4, 0, 0, 1) infinite;
-    animation: bd-spinner-anim2 2s cubic-bezier(0.4, 0, 0, 1) infinite;
-    backface-visibility: hidden;
-    -webkit-backface-visibility: hidden;
-}
-
-@-webkit-keyframes bd-spinner-anim1 {
-    0% {
-        -webkit-transform: translate(10px, 0);
-        transform: translate(10px, 0);
-    }
-
-    50% {
-        -webkit-transform: translate(0, 0);
-        transform: translate(0, 0);
-    }
-
-    100% {
-        -webkit-transform: translate(10px, 0);
-        transform: translate(10px, 0);
-    }
-}
-
-@keyframes bd-spinner-anim1 {
-    0% {
-        -webkit-transform: translate(10px, 0);
-        transform: translate(10px, 0);
-    }
-
-    50% {
-        -webkit-transform: translate(0, 0);
-        transform: translate(0, 0);
-    }
-
-    100% {
-        -webkit-transform: translate(10px, 0);
-        transform: translate(10px, 0);
-    }
-}
-
-@-webkit-keyframes bd-spinner-anim2 {
-    0% {
-        -webkit-transform: translate(-10px, 0);
-        transform: translate(-10px, 0);
-    }
-
-    50% {
-        -webkit-transform: translate(0, 0);
-        transform: translate(0, 0);
-    }
-
-    100% {
-        -webkit-transform: translate(-10px, 0);
-        transform: translate(-10px, 0);
-    }
-}
-
-@keyframes bd-spinner-anim2 {
-    0% {
-        -webkit-transform: translate(-10px, 0);
-        transform: translate(-10px, 0);
-    }
-
-    50% {
-        -webkit-transform: translate(0, 0);
-        transform: translate(0, 0);
-    }
-
-    100% {
-        -webkit-transform: translate(-10px, 0);
-        transform: translate(-10px, 0);
-    }
-}
-
-@-webkit-keyframes bd-spinner-anim3 {
-    from {
-        -webkit-transform: rotate(0);
-        transform: rotate(0);
-    }
-
-    to {
-        -webkit-transform: rotate(360deg);
-        transform: rotate(360deg);
-    }
-}
-
-@keyframes bd-spinner-anim3 {
-    from {
-        -webkit-transform: rotate(0);
-        transform: rotate(0);
-    }
-
-    to {
-        -webkit-transform: rotate(360deg);
-        transform: rotate(360deg);
-    }
-}
-
-
-/*BD-SPINNER-1*/
-.bd-spinner-1 {
-    width: 40px;
-    height: 40px;
-    position: relative;
-    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIyNSAyNSA1MCA1MCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTAwIDEwMDsiIHhtbDpzcGFjZT0icHJlc2VydmUiIGNsYXNzPSJjaXJjdWxhciI+IDxjaXJjbGUgY2xhc3M9InBhdGgiIGN4PSI1MCIgY3k9IjUwIiByPSIxNyIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxNSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIi8+IDxzdHlsZT4gLmxvYWRlciB7IHBvc2l0aW9uOiByZWxhdGl2ZTsgbWFyZ2luOiAwIGF1dG87IHdpZHRoOiAxMDBweDsgfSAubG9hZGVyOmJlZm9yZSB7IGNvbnRlbnQ6ICIiOyBkaXNwbGF5OiBibG9jazsgcGFkZGluZy10b3A6IDEwMCU7IH0gLmNpcmN1bGFyIHsgLXdlYmtpdC1hbmltYXRpb246IHJvdGF0ZSAycyBsaW5lYXIgaW5maW5pdGU7IGFuaW1hdGlvbjogcm90YXRlIDJzIGxpbmVhciBpbmZpbml0ZTsgaGVpZ2h0OiAxMDAlOyAtd2Via2l0LXRyYW5zZm9ybS1vcmlnaW46IGNlbnRlciBjZW50ZXI7IC1tcy10cmFuc2Zvcm0tb3JpZ2luOiBjZW50ZXIgY2VudGVyOyB0cmFuc2Zvcm0tb3JpZ2luOiBjZW50ZXIgY2VudGVyOyB3aWR0aDogMTAwJTsgcG9zaXRpb246IGFic29sdXRlOyB0b3A6IDA7IGJvdHRvbTogMDsgbGVmdDogMDsgcmlnaHQ6IDA7IG1hcmdpbjogYXV0bzsgc3Ryb2tlOiAjZmZmOyB9IC5wYXRoIHsgc3Ryb2tlLWRhc2hhcnJheTogMSwgMjAwOyBzdHJva2UtZGFzaG9mZnNldDogMDsgLXdlYmtpdC1hbmltYXRpb246IGRhc2ggMS41cyBlYXNlLWluLW91dCBpbmZpbml0ZSwgY29sb3IgNnMgZWFzZS1pbi1vdXQgaW5maW5pdGU7IGFuaW1hdGlvbjogZGFzaCAxLjVzIGVhc2UtaW4tb3V0IGluZmluaXRlLCBjb2xvciA2cyBlYXNlLWluLW91dCBpbmZpbml0ZTsgc3Ryb2tlLWxpbmVjYXA6IGJ1dHQ7IH0gQC13ZWJraXQta2V5ZnJhbWVzIHJvdGF0ZSB7IDEwMCUgeyAtd2Via2l0LXRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7IHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7IH0gfSBAa2V5ZnJhbWVzIHJvdGF0ZSB7IDEwMCUgeyAtd2Via2l0LXRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7IHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7IH0gfSBALXdlYmtpdC1rZXlmcmFtZXMgZGFzaCB7IDAlIHsgc3Ryb2tlLWRhc2hhcnJheTogMSwgMjAwOyBzdHJva2UtZGFzaG9mZnNldDogMDsgfSA1MCUgeyBzdHJva2UtZGFzaGFycmF5OiA4OSwgMjAwOyBzdHJva2UtZGFzaG9mZnNldDogLTM1cHg7IH0gMTAwJSB7IHN0cm9rZS1kYXNoYXJyYXk6IDg5LCAyMDA7IHN0cm9rZS1kYXNob2Zmc2V0OiAtMTI0cHg7IH0gfSBAa2V5ZnJhbWVzIGRhc2ggeyAwJSB7IHN0cm9rZS1kYXNoYXJyYXk6IDEsIDIwMDsgc3Ryb2tlLWRhc2hvZmZzZXQ6IDA7IH0gNTAlIHsgc3Ryb2tlLWRhc2hhcnJheTogODksIDIwMDsgc3Ryb2tlLWRhc2hvZmZzZXQ6IC0zNXB4OyB9IDEwMCUgeyBzdHJva2UtZGFzaGFycmF5OiA4OSwgMjAwOyBzdHJva2UtZGFzaG9mZnNldDogLTEyNHB4OyB9IH0gPC9zdHlsZT4gPC9zdmc+) 50% 50%/60% no-repeat;
-    backface-visibility: hidden;
-    -webkit-backface-visibility: hidden;
-}
-
-
-/*BD-SPINNER-2*/
-.bd-spinner-2 {
-    width: 40px;
-    height: 40px;
-    position: relative;
-    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIyNSAyNSA1MCA1MCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTAwIDEwMDsiIHhtbDpzcGFjZT0icHJlc2VydmUiIGNsYXNzPSJjaXJjdWxhciI+IDxjaXJjbGUgY2xhc3M9InBhdGgiIGN4PSI1MCIgY3k9IjUwIiByPSIyMCIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxMCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIi8+IDxzdHlsZT4gLmxvYWRlciB7IHBvc2l0aW9uOiByZWxhdGl2ZTsgbWFyZ2luOiAwIGF1dG87IHdpZHRoOiAxMDBweDsgfSAubG9hZGVyOmJlZm9yZSB7IGNvbnRlbnQ6ICIiOyBkaXNwbGF5OiBibG9jazsgcGFkZGluZy10b3A6IDEwMCU7IH0gLmNpcmN1bGFyIHsgLXdlYmtpdC1hbmltYXRpb246IHJvdGF0ZSAycyBsaW5lYXIgaW5maW5pdGU7IGFuaW1hdGlvbjogcm90YXRlIDJzIGxpbmVhciBpbmZpbml0ZTsgaGVpZ2h0OiAxMDAlOyAtd2Via2l0LXRyYW5zZm9ybS1vcmlnaW46IGNlbnRlciBjZW50ZXI7IC1tcy10cmFuc2Zvcm0tb3JpZ2luOiBjZW50ZXIgY2VudGVyOyB0cmFuc2Zvcm0tb3JpZ2luOiBjZW50ZXIgY2VudGVyOyB3aWR0aDogMTAwJTsgcG9zaXRpb246IGFic29sdXRlOyB0b3A6IDA7IGJvdHRvbTogMDsgbGVmdDogMDsgcmlnaHQ6IDA7IG1hcmdpbjogYXV0bzsgc3Ryb2tlOiAjZmZmOyB9IC5wYXRoIHsgc3Ryb2tlLWRhc2hhcnJheTogMSwgMjAwOyBzdHJva2UtZGFzaG9mZnNldDogMDsgLXdlYmtpdC1hbmltYXRpb246IGRhc2ggMS41cyBlYXNlLWluLW91dCBpbmZpbml0ZSwgY29sb3IgNnMgZWFzZS1pbi1vdXQgaW5maW5pdGU7IGFuaW1hdGlvbjogZGFzaCAxLjVzIGVhc2UtaW4tb3V0IGluZmluaXRlLCBjb2xvciA2cyBlYXNlLWluLW91dCBpbmZpbml0ZTsgc3Ryb2tlLWxpbmVjYXA6IGJ1dHQ7IH0gQC13ZWJraXQta2V5ZnJhbWVzIHJvdGF0ZSB7IDEwMCUgeyAtd2Via2l0LXRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7IHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7IH0gfSBAa2V5ZnJhbWVzIHJvdGF0ZSB7IDEwMCUgeyAtd2Via2l0LXRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7IHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7IH0gfSBALXdlYmtpdC1rZXlmcmFtZXMgZGFzaCB7IDAlIHsgc3Ryb2tlLWRhc2hhcnJheTogMSwgMjAwOyBzdHJva2UtZGFzaG9mZnNldDogMDsgfSA1MCUgeyBzdHJva2UtZGFzaGFycmF5OiA4OSwgMjAwOyBzdHJva2UtZGFzaG9mZnNldDogLTM1cHg7IH0gMTAwJSB7IHN0cm9rZS1kYXNoYXJyYXk6IDg5LCAyMDA7IHN0cm9rZS1kYXNob2Zmc2V0OiAtMTI0cHg7IH0gfSBAa2V5ZnJhbWVzIGRhc2ggeyAwJSB7IHN0cm9rZS1kYXNoYXJyYXk6IDEsIDIwMDsgc3Ryb2tlLWRhc2hvZmZzZXQ6IDA7IH0gNTAlIHsgc3Ryb2tlLWRhc2hhcnJheTogODksIDIwMDsgc3Ryb2tlLWRhc2hvZmZzZXQ6IC0zNXB4OyB9IDEwMCUgeyBzdHJva2UtZGFzaGFycmF5OiA4OSwgMjAwOyBzdHJva2UtZGFzaG9mZnNldDogLTEyNHB4OyB9IH0gPC9zdHlsZT4gPC9zdmc+) 50% 50%/60% no-repeat;
-    backface-visibility: hidden;
-    -webkit-backface-visibility: hidden;
-}
-
-
-/*BD-SPINNER-3*/
-.bd-spinner-3 {
-    width: 40px;
-    height: 40px;
-    position: relative;
-    backface-visibility: hidden;
-    -webkit-backface-visibility: hidden;
-}
-
-.bd-spinner-3::before {
-    content: "";
-    background: #fff;
-    height: 30px;
-    width: 30px;
-    position: absolute;
-    border-radius: 50%;
-    left: 5px;
-    top: 5px;
-    -webkit-animation: bd-spinner-3-anim1 1.5s cubic-bezier(0.4, 0, 0, 1) infinite;
-    animation: bd-spinner-3-anim1 1.5s cubic-bezier(0.4, 0, 0, 1) infinite;
-    backface-visibility: hidden;
-    -webkit-backface-visibility: hidden;
-}
-
-.bd-spinner-3::after {
-    content: "";
-    background: #202225;
-    height: 20px;
-    width: 20px;
-    position: absolute;
-    border-radius: 50%;
-    left: 10px;
-    top: 10px;
-    -webkit-animation: bd-spinner-3-anim2 1.5s cubic-bezier(0.4, 0, 0, 1) infinite;
-    animation: bd-spinner-3-anim2 1.5s cubic-bezier(0.4, 0, 0, 1) infinite;
-    backface-visibility: hidden;
-    -webkit-backface-visibility: hidden;
-}
-
-@-webkit-keyframes bd-spinner-3-anim1 {
-    0% {
-        -webkit-transform: scale(1)rotate(0.01deg);
-        transform: scale(1)rotate(0.01deg);
-    }
-
-    50% {
-        -webkit-transform: scale(1.2)rotate(0.01deg);
-        transform: scale(1.2)rotate(0.01deg);
-    }
-
-    100% {
-        -webkit-transform: scale(1)rotate(0.01deg);
-        transform: scale(1)rotate(0.01deg);
-    }
-}
-
-@keyframes bd-spinner-3-anim1 {
-    0% {
-        -webkit-transform: scale(1)rotate(0.01deg);
-        transform: scale(1)rotate(0.01deg);
-    }
-
-    50% {
-        -webkit-transform: scale(1.2)rotate(0.01deg);
-        transform: scale(1.2)rotate(0.01deg);
-    }
-
-    100% {
-        -webkit-transform: scale(1)rotate(0.01deg);
-        transform: scale(1)rotate(0.01deg);
-    }
-}
-
-@-webkit-keyframes bd-spinner-3-anim2 {
-    0% {
-        -webkit-transform: scale(1)rotate(0.01deg);
-        transform: scale(1)rotate(0.01deg);
-    }
-
-    50% {
-        -webkit-transform: scale(0.4)rotate(0.01deg);
-        transform: scale(0.4)rotate(0.01deg);
-    }
-
-    100% {
-        -webkit-transform: scale(1)rotate(0.01deg);
-        transform: scale(1)rotate(0.01deg);
-    }
-}
-
-@keyframes bd-spinner-3-anim2 {
-    0% {
-        -webkit-transform: scale(1)rotate(0.01deg);
-        transform: scale(1)rotate(0.01deg);
-    }
-
-    50% {
-        -webkit-transform: scale(0.4)rotate(0.01deg);
-        transform: scale(0.4)rotate(0.01deg);
-    }
-
-    100% {
-        -webkit-transform: scale(1)rotate(0.01deg);
-        transform: scale(1)rotate(0.01deg);
-    }
-}
-
-
-/*BD-SPINNER-4*/
-.bd-spinner-4 {
-    width: 40px;
-    height: 40px;
-    position: relative;
-    -webkit-animation: bd-spinner-4-anim1 1s cubic-bezier(0.9, -0.64, 0.05, 1.44) infinite;
-    animation: bd-spinner-4-anim1 1s cubic-bezier(0.9, -0.64, 0.05, 1.44) infinite;
-    backface-visibility: hidden;
-    -webkit-backface-visibility: hidden;
-}
-
-.bd-spinner-4::before {
-    content: "";
-    background: #fff;
-    height: 10px;
-    width: 10px;
-    position: absolute;
-    border-radius: 50%;
-    left: 5px;
-    top: 15px;
-    backface-visibility: hidden;
-    -webkit-backface-visibility: hidden;
-}
-
-.bd-spinner-4::after {
-    content: "";
-    background: #fff;
-    height: 10px;
-    width: 10px;
-    position: absolute;
-    border-radius: 50%;
-    right: 5px;
-    top: 15px;
-    backface-visibility: hidden;
-    -webkit-backface-visibility: hidden;
-}
-
-@-webkit-keyframes bd-spinner-4-anim1 {
-    0% {
-        -webkit-transform: rotate(0deg);
-        transform: rotate(0deg);
-    }
-
-    100% {
-        -webkit-transform: rotate(180deg);
-        transform: rotate(180deg);
-    }
-}
-
-@keyframes bd-spinner-4-anim1 {
-    0% {
-        -webkit-transform: rotate(0deg);
-        transform: rotate(0deg);
-    }
-
-    100% {
-        -webkit-transform: rotate(180deg);
-        transform: rotate(180deg);
-    }
-}
diff --git a/client/src/styles/partials/generic.scss b/client/src/styles/partials/generic.scss
index ce7fac15..2ec17aa5 100644
--- a/client/src/styles/partials/generic.scss
+++ b/client/src/styles/partials/generic.scss
@@ -56,13 +56,28 @@
 }
 
 .bd-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
     cursor: pointer;
-    color: #b9bbbe;
-    background: #202225;
+    color: #FFF;
     text-align: center;
-    -webkit-user-select: none;
     user-select: none;
     font-weight: 500;
+    background: $colbdblue;
+
+    &:hover {
+        background: darken($colbdblue, 5%);
+    }
+
+    &.bd-disabled {
+        filter: grayscale(90%);
+        cursor: not-allowed;
+    }
+
+    .bd-spinner-7 {
+        opacity: .3;
+    }
 }
 
 .bd-form-item h5 {
@@ -103,26 +118,20 @@
     background: #C42929;
 
     &:hover {
-        background: lighten(#C42929, 2%);
+        background: darken(#C42929, 2%);
     }
 }
 
 .bd-form-button {
-    background: #3e82e5;
     width: 100px;
     height: 30px;
     line-height: 30px;
     text-align: center;
-    color: #FFF;
     border-radius: 4px;
     margin-top: 10px;
     cursor: pointer;
     font-weight: 500;
     user-select: none;
-
-    &:hover {
-        background: lighten(#3e82e5, 5%);
-    }
 }
 
 .bd-setting-switch {
diff --git a/client/src/styles/partials/index.scss b/client/src/styles/partials/index.scss
index 209e9487..5d99201e 100644
--- a/client/src/styles/partials/index.scss
+++ b/client/src/styles/partials/index.scss
@@ -1,6 +1,7 @@
 @import './images.scss';
 @import './colours.scss';
 @import './animations.scss';
+@import './spinners.scss';
 @import './layouts.scss';
 @import './bdsettings.scss';
 @import './sidebarview.scss';
diff --git a/client/src/styles/partials/spinners.scss b/client/src/styles/partials/spinners.scss
new file mode 100644
index 00000000..9d7bcf7e
--- /dev/null
+++ b/client/src/styles/partials/spinners.scss
@@ -0,0 +1,942 @@
+.bd-spinner {
+    width: 40px;
+    height: 40px;
+    position: relative;
+    -webkit-animation: bd-spinner-anim3 2s cubic-bezier(0.4, 0, 0, 1) infinite;
+    animation: bd-spinner-anim3 2s cubic-bezier(0.4, 0, 0, 1) infinite;
+    backface-visibility: hidden;
+    -webkit-backface-visibility: hidden;
+}
+
+.bd-spinner::after {
+    content: "";
+    background: #fff;
+    height: 10px;
+    width: 10px;
+    position: absolute;
+    border-radius: 50%;
+    left: 5px;
+    top: 15px;
+    -webkit-animation: bd-spinner-anim1 2s cubic-bezier(0.4, 0, 0, 1) infinite;
+    animation: bd-spinner-anim1 2s cubic-bezier(0.4, 0, 0, 1) infinite;
+    backface-visibility: hidden;
+    -webkit-backface-visibility: hidden;
+}
+
+.bd-spinner::before {
+    content: "";
+    background: #fff;
+    height: 10px;
+    width: 10px;
+    position: absolute;
+    border-radius: 50%;
+    right: 5px;
+    top: 15px;
+    -webkit-animation: bd-spinner-anim2 2s cubic-bezier(0.4, 0, 0, 1) infinite;
+    animation: bd-spinner-anim2 2s cubic-bezier(0.4, 0, 0, 1) infinite;
+    backface-visibility: hidden;
+    -webkit-backface-visibility: hidden;
+}
+
+@-webkit-keyframes bd-spinner-anim1 {
+    0% {
+        -webkit-transform: translate(10px, 0);
+        transform: translate(10px, 0);
+    }
+
+    50% {
+        -webkit-transform: translate(0, 0);
+        transform: translate(0, 0);
+    }
+
+    100% {
+        -webkit-transform: translate(10px, 0);
+        transform: translate(10px, 0);
+    }
+}
+
+@keyframes bd-spinner-anim1 {
+    0% {
+        -webkit-transform: translate(10px, 0);
+        transform: translate(10px, 0);
+    }
+
+    50% {
+        -webkit-transform: translate(0, 0);
+        transform: translate(0, 0);
+    }
+
+    100% {
+        -webkit-transform: translate(10px, 0);
+        transform: translate(10px, 0);
+    }
+}
+
+@-webkit-keyframes bd-spinner-anim2 {
+    0% {
+        -webkit-transform: translate(-10px, 0);
+        transform: translate(-10px, 0);
+    }
+
+    50% {
+        -webkit-transform: translate(0, 0);
+        transform: translate(0, 0);
+    }
+
+    100% {
+        -webkit-transform: translate(-10px, 0);
+        transform: translate(-10px, 0);
+    }
+}
+
+@keyframes bd-spinner-anim2 {
+    0% {
+        -webkit-transform: translate(-10px, 0);
+        transform: translate(-10px, 0);
+    }
+
+    50% {
+        -webkit-transform: translate(0, 0);
+        transform: translate(0, 0);
+    }
+
+    100% {
+        -webkit-transform: translate(-10px, 0);
+        transform: translate(-10px, 0);
+    }
+}
+
+@-webkit-keyframes bd-spinner-anim3 {
+    from {
+        -webkit-transform: rotate(0);
+        transform: rotate(0);
+    }
+
+    to {
+        -webkit-transform: rotate(360deg);
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes bd-spinner-anim3 {
+    from {
+        -webkit-transform: rotate(0);
+        transform: rotate(0);
+    }
+
+    to {
+        -webkit-transform: rotate(360deg);
+        transform: rotate(360deg);
+    }
+}
+
+
+/*BD-SPINNER-1*/
+.bd-spinner-1 {
+    width: 40px;
+    height: 40px;
+    position: relative;
+    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIyNSAyNSA1MCA1MCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTAwIDEwMDsiIHhtbDpzcGFjZT0icHJlc2VydmUiIGNsYXNzPSJjaXJjdWxhciI+IDxjaXJjbGUgY2xhc3M9InBhdGgiIGN4PSI1MCIgY3k9IjUwIiByPSIxNyIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxNSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIi8+IDxzdHlsZT4gLmxvYWRlciB7IHBvc2l0aW9uOiByZWxhdGl2ZTsgbWFyZ2luOiAwIGF1dG87IHdpZHRoOiAxMDBweDsgfSAubG9hZGVyOmJlZm9yZSB7IGNvbnRlbnQ6ICIiOyBkaXNwbGF5OiBibG9jazsgcGFkZGluZy10b3A6IDEwMCU7IH0gLmNpcmN1bGFyIHsgLXdlYmtpdC1hbmltYXRpb246IHJvdGF0ZSAycyBsaW5lYXIgaW5maW5pdGU7IGFuaW1hdGlvbjogcm90YXRlIDJzIGxpbmVhciBpbmZpbml0ZTsgaGVpZ2h0OiAxMDAlOyAtd2Via2l0LXRyYW5zZm9ybS1vcmlnaW46IGNlbnRlciBjZW50ZXI7IC1tcy10cmFuc2Zvcm0tb3JpZ2luOiBjZW50ZXIgY2VudGVyOyB0cmFuc2Zvcm0tb3JpZ2luOiBjZW50ZXIgY2VudGVyOyB3aWR0aDogMTAwJTsgcG9zaXRpb246IGFic29sdXRlOyB0b3A6IDA7IGJvdHRvbTogMDsgbGVmdDogMDsgcmlnaHQ6IDA7IG1hcmdpbjogYXV0bzsgc3Ryb2tlOiAjZmZmOyB9IC5wYXRoIHsgc3Ryb2tlLWRhc2hhcnJheTogMSwgMjAwOyBzdHJva2UtZGFzaG9mZnNldDogMDsgLXdlYmtpdC1hbmltYXRpb246IGRhc2ggMS41cyBlYXNlLWluLW91dCBpbmZpbml0ZSwgY29sb3IgNnMgZWFzZS1pbi1vdXQgaW5maW5pdGU7IGFuaW1hdGlvbjogZGFzaCAxLjVzIGVhc2UtaW4tb3V0IGluZmluaXRlLCBjb2xvciA2cyBlYXNlLWluLW91dCBpbmZpbml0ZTsgc3Ryb2tlLWxpbmVjYXA6IGJ1dHQ7IH0gQC13ZWJraXQta2V5ZnJhbWVzIHJvdGF0ZSB7IDEwMCUgeyAtd2Via2l0LXRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7IHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7IH0gfSBAa2V5ZnJhbWVzIHJvdGF0ZSB7IDEwMCUgeyAtd2Via2l0LXRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7IHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7IH0gfSBALXdlYmtpdC1rZXlmcmFtZXMgZGFzaCB7IDAlIHsgc3Ryb2tlLWRhc2hhcnJheTogMSwgMjAwOyBzdHJva2UtZGFzaG9mZnNldDogMDsgfSA1MCUgeyBzdHJva2UtZGFzaGFycmF5OiA4OSwgMjAwOyBzdHJva2UtZGFzaG9mZnNldDogLTM1cHg7IH0gMTAwJSB7IHN0cm9rZS1kYXNoYXJyYXk6IDg5LCAyMDA7IHN0cm9rZS1kYXNob2Zmc2V0OiAtMTI0cHg7IH0gfSBAa2V5ZnJhbWVzIGRhc2ggeyAwJSB7IHN0cm9rZS1kYXNoYXJyYXk6IDEsIDIwMDsgc3Ryb2tlLWRhc2hvZmZzZXQ6IDA7IH0gNTAlIHsgc3Ryb2tlLWRhc2hhcnJheTogODksIDIwMDsgc3Ryb2tlLWRhc2hvZmZzZXQ6IC0zNXB4OyB9IDEwMCUgeyBzdHJva2UtZGFzaGFycmF5OiA4OSwgMjAwOyBzdHJva2UtZGFzaG9mZnNldDogLTEyNHB4OyB9IH0gPC9zdHlsZT4gPC9zdmc+) 50% 50%/60% no-repeat;
+    backface-visibility: hidden;
+    -webkit-backface-visibility: hidden;
+}
+
+
+/*BD-SPINNER-2*/
+.bd-spinner-2 {
+    width: 40px;
+    height: 40px;
+    position: relative;
+    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIyNSAyNSA1MCA1MCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTAwIDEwMDsiIHhtbDpzcGFjZT0icHJlc2VydmUiIGNsYXNzPSJjaXJjdWxhciI+IDxjaXJjbGUgY2xhc3M9InBhdGgiIGN4PSI1MCIgY3k9IjUwIiByPSIyMCIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxMCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIi8+IDxzdHlsZT4gLmxvYWRlciB7IHBvc2l0aW9uOiByZWxhdGl2ZTsgbWFyZ2luOiAwIGF1dG87IHdpZHRoOiAxMDBweDsgfSAubG9hZGVyOmJlZm9yZSB7IGNvbnRlbnQ6ICIiOyBkaXNwbGF5OiBibG9jazsgcGFkZGluZy10b3A6IDEwMCU7IH0gLmNpcmN1bGFyIHsgLXdlYmtpdC1hbmltYXRpb246IHJvdGF0ZSAycyBsaW5lYXIgaW5maW5pdGU7IGFuaW1hdGlvbjogcm90YXRlIDJzIGxpbmVhciBpbmZpbml0ZTsgaGVpZ2h0OiAxMDAlOyAtd2Via2l0LXRyYW5zZm9ybS1vcmlnaW46IGNlbnRlciBjZW50ZXI7IC1tcy10cmFuc2Zvcm0tb3JpZ2luOiBjZW50ZXIgY2VudGVyOyB0cmFuc2Zvcm0tb3JpZ2luOiBjZW50ZXIgY2VudGVyOyB3aWR0aDogMTAwJTsgcG9zaXRpb246IGFic29sdXRlOyB0b3A6IDA7IGJvdHRvbTogMDsgbGVmdDogMDsgcmlnaHQ6IDA7IG1hcmdpbjogYXV0bzsgc3Ryb2tlOiAjZmZmOyB9IC5wYXRoIHsgc3Ryb2tlLWRhc2hhcnJheTogMSwgMjAwOyBzdHJva2UtZGFzaG9mZnNldDogMDsgLXdlYmtpdC1hbmltYXRpb246IGRhc2ggMS41cyBlYXNlLWluLW91dCBpbmZpbml0ZSwgY29sb3IgNnMgZWFzZS1pbi1vdXQgaW5maW5pdGU7IGFuaW1hdGlvbjogZGFzaCAxLjVzIGVhc2UtaW4tb3V0IGluZmluaXRlLCBjb2xvciA2cyBlYXNlLWluLW91dCBpbmZpbml0ZTsgc3Ryb2tlLWxpbmVjYXA6IGJ1dHQ7IH0gQC13ZWJraXQta2V5ZnJhbWVzIHJvdGF0ZSB7IDEwMCUgeyAtd2Via2l0LXRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7IHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7IH0gfSBAa2V5ZnJhbWVzIHJvdGF0ZSB7IDEwMCUgeyAtd2Via2l0LXRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7IHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7IH0gfSBALXdlYmtpdC1rZXlmcmFtZXMgZGFzaCB7IDAlIHsgc3Ryb2tlLWRhc2hhcnJheTogMSwgMjAwOyBzdHJva2UtZGFzaG9mZnNldDogMDsgfSA1MCUgeyBzdHJva2UtZGFzaGFycmF5OiA4OSwgMjAwOyBzdHJva2UtZGFzaG9mZnNldDogLTM1cHg7IH0gMTAwJSB7IHN0cm9rZS1kYXNoYXJyYXk6IDg5LCAyMDA7IHN0cm9rZS1kYXNob2Zmc2V0OiAtMTI0cHg7IH0gfSBAa2V5ZnJhbWVzIGRhc2ggeyAwJSB7IHN0cm9rZS1kYXNoYXJyYXk6IDEsIDIwMDsgc3Ryb2tlLWRhc2hvZmZzZXQ6IDA7IH0gNTAlIHsgc3Ryb2tlLWRhc2hhcnJheTogODksIDIwMDsgc3Ryb2tlLWRhc2hvZmZzZXQ6IC0zNXB4OyB9IDEwMCUgeyBzdHJva2UtZGFzaGFycmF5OiA4OSwgMjAwOyBzdHJva2UtZGFzaG9mZnNldDogLTEyNHB4OyB9IH0gPC9zdHlsZT4gPC9zdmc+) 50% 50%/60% no-repeat;
+    backface-visibility: hidden;
+    -webkit-backface-visibility: hidden;
+}
+
+
+/*BD-SPINNER-3*/
+.bd-spinner-3 {
+    width: 40px;
+    height: 40px;
+    position: relative;
+    backface-visibility: hidden;
+    -webkit-backface-visibility: hidden;
+}
+
+.bd-spinner-3::before {
+    content: "";
+    background: #fff;
+    height: 30px;
+    width: 30px;
+    position: absolute;
+    border-radius: 50%;
+    left: 5px;
+    top: 5px;
+    -webkit-animation: bd-spinner-3-anim1 2s cubic-bezier(0.4, 0, 0, 1) infinite;
+    animation: bd-spinner-3-anim1 3s cubic-bezier(0.4, 0, 0, 1) infinite;
+    backface-visibility: hidden;
+    -webkit-backface-visibility: hidden;
+}
+
+.bd-spinner-3::after {
+    content: "";
+    background: #202225;
+    height: 20px;
+    width: 20px;
+    position: absolute;
+    border-radius: 50%;
+    left: 10px;
+    top: 10px;
+    -webkit-animation: bd-spinner-3-anim2 2s cubic-bezier(0.4, 0, 0, 1) infinite;
+    animation: bd-spinner-3-anim2 3s cubic-bezier(.4, 0, 0, 1) -.1s infinite;
+    backface-visibility: hidden;
+    -webkit-backface-visibility: hidden;
+}
+
+@-webkit-keyframes bd-spinner-3-anim1 {
+    0% {
+        -webkit-transform: scale(1)rotate(0.01deg);
+        transform: scale(1)rotate(0.01deg);
+    }
+
+    50% {
+        -webkit-transform: scale(1.2)rotate(0.01deg);
+        transform: scale(1.2)rotate(0.01deg);
+    }
+
+    100% {
+        -webkit-transform: scale(1)rotate(0.01deg);
+        transform: scale(1)rotate(0.01deg);
+    }
+}
+
+@keyframes bd-spinner-3-anim1 {
+    0% {
+        -webkit-transform: scale(1)rotate(0.01deg);
+        transform: scale(1)rotate(0.01deg);
+    }
+
+    50% {
+        -webkit-transform: scale(0.8)rotate(0.01deg);
+        transform: scale(1.2)rotate(0.01deg);
+    }
+
+    100% {
+        -webkit-transform: scale(1)rotate(0.01deg);
+        transform: scale(1)rotate(0.01deg);
+    }
+}
+
+@-webkit-keyframes bd-spinner-3-anim2 {
+    0% {
+        -webkit-transform: scale(1)rotate(0.01deg);
+        transform: scale(1)rotate(0.01deg);
+    }
+
+    50% {
+        -webkit-transform: scale(0.4)rotate(0.01deg);
+        transform: scale(0.4)rotate(0.01deg);
+    }
+
+    100% {
+        -webkit-transform: scale(1)rotate(0.01deg);
+        transform: scale(1)rotate(0.01deg);
+    }
+}
+
+@keyframes bd-spinner-3-anim2 {
+    0% {
+        -webkit-transform: scale(1)rotate(0.01deg);
+        transform: scale(1)rotate(0.01deg);
+    }
+
+    50% {
+        -webkit-transform: scale(0.4)rotate(0.01deg);
+        transform: scale(0.4)rotate(0.01deg);
+    }
+
+    100% {
+        -webkit-transform: scale(1)rotate(0.01deg);
+        transform: scale(1)rotate(0.01deg);
+    }
+}
+
+
+/*BD-SPINNER-4*/
+.bd-spinner-4 {
+    width: 40px;
+    height: 40px;
+    position: relative;
+    -webkit-animation: bd-spinner-4-anim1 1s cubic-bezier(0.9, -0.64, 0.05, 1.44) infinite;
+    animation: bd-spinner-4-anim1 1s cubic-bezier(0.9, -0.64, 0.05, 1.44) infinite;
+    backface-visibility: hidden;
+    -webkit-backface-visibility: hidden;
+}
+
+.bd-spinner-4::before {
+    content: "";
+    background: #fff;
+    height: 10px;
+    width: 10px;
+    position: absolute;
+    border-radius: 50%;
+    left: 5px;
+    top: 15px;
+    backface-visibility: hidden;
+    -webkit-backface-visibility: hidden;
+}
+
+.bd-spinner-4::after {
+    content: "";
+    background: #fff;
+    height: 10px;
+    width: 10px;
+    position: absolute;
+    border-radius: 50%;
+    right: 5px;
+    top: 15px;
+    backface-visibility: hidden;
+    -webkit-backface-visibility: hidden;
+}
+
+@-webkit-keyframes bd-spinner-4-anim1 {
+    0% {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+
+    100% {
+        -webkit-transform: rotate(180deg);
+        transform: rotate(180deg);
+    }
+}
+
+@keyframes bd-spinner-4-anim1 {
+    0% {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+
+    100% {
+        -webkit-transform: rotate(180deg);
+        transform: rotate(180deg);
+    }
+}
+
+/*BD-SPINNER-5*/
+.bd-spinner-5 {
+    width: 40px;
+    height: 40px;
+    position: relative;
+    backface-visibility: hidden;
+    -webkit-backface-visibility: hidden;
+}
+
+.bd-spinner-5::after {
+    content: "";
+    background: #fff;
+    height: 10px;
+    width: 10px;
+    position: absolute;
+    border-radius: 5px;
+    left: 5px;
+    top: 10px;
+    -webkit-animation: bd-spinner-anim1 2s cubic-bezier(0.4, 0, 0, 1) infinite;
+    animation: bd-spinner-5-anim1 2s cubic-bezier(0.4, 0, 0, 1) infinite;
+    backface-visibility: hidden;
+    -webkit-backface-visibility: hidden;
+}
+
+.bd-spinner-5::before {
+    content: "";
+    background: #fff;
+    height: 10px;
+    width: 10px;
+    position: absolute;
+    border-radius: 5px;
+    left: 5px;
+    bottom: 10px;
+    -webkit-animation: bd-spinner-anim1 2s cubic-bezier(0.4, 0, 0, 1) infinite;
+    animation: bd-spinner-5-anim1 2s cubic-bezier(0.4, 0, 0, 1) -1s infinite;
+    backface-visibility: hidden;
+    -webkit-backface-visibility: hidden;
+}
+
+@-webkit-keyframes bd-spinner-5-anim1 {
+    0% {
+        left: 0px;
+        width: 10px;
+        height: 10px;
+    }
+
+    25% {
+        left: 0px;
+        width: 30px;
+        height: 6px;
+    }
+
+    50% {
+        left: 20px;
+        width: 10px;
+        height: 10px;
+    }
+
+    75% {
+        left: 0px;
+        width: 30px;
+        height: 6px;
+    }
+
+    100% {
+        left: 0px;
+        width: 10px;
+        height: 10px;
+    }
+}
+
+@keyframes bd-spinner-5-anim1 {
+    0% {
+        left: 0px;
+        width: 10px;
+        height: 10px;
+    }
+
+    25% {
+        left: 0px;
+        width: 30px;
+        height: 6px;
+    }
+
+    50% {
+        left: 20px;
+        width: 10px;
+        height: 10px;
+    }
+
+    75% {
+        left: 0px;
+        width: 30px;
+        height: 6px;
+    }
+
+    100% {
+        left: 0px;
+        width: 10px;
+        height: 10px;
+    }
+}
+
+/*BD-SPINNER-6*/
+.bd-spinner-6 {
+    width: 40px;
+    height: 40px;
+    position: relative;
+    backface-visibility: hidden;
+    -webkit-backface-visibility: hidden;
+    -webkit-transform: rotate(45deg);
+    -ms-transform: rotate(45deg);
+    transform: rotate(45deg)
+}
+
+.bd-spinner-6::after {
+    content: "";
+    background: #fff;
+    height: 10px;
+    width: 10px;
+    position: absolute;
+    left: 5px;
+    top: 5px;
+    -webkit-animation: bd-spinner-6-anim1 2s cubic-bezier(.4, 0, 0, 1) infinite;
+    animation: bd-spinner-6-anim1 2s cubic-bezier(.4, 0, 0, 1) infinite;
+    backface-visibility: hidden;
+    -webkit-backface-visibility: hidden;
+}
+
+.bd-spinner-6::before {
+    content: "";
+    background: #fff;
+    height: 10px;
+    width: 10px;
+    position: absolute;
+    right: 5px;
+    bottom: 5px;
+    -webkit-animation: bd-spinner-6-anim2 2s cubic-bezier(.4, 0, 0, 1) infinite;
+    animation: bd-spinner-6-anim2 2s cubic-bezier(.4, 0, 0, 1) infinite;
+    backface-visibility: hidden;
+    -webkit-backface-visibility: hidden;
+}
+
+@-webkit-keyframes bd-spinner-6-anim1 {
+    0% {
+        top: 10px;
+        left: 10px;
+        width: 10px;
+        height: 10px;
+    }
+
+    25% {
+        top: 10px;
+        left: 10px;
+        width: 20px;
+        height: 10px;
+    }
+
+    50% {
+        top: 10px;
+        left: 20px;
+        width: 10px;
+        height: 10px;
+    }
+
+    75% {
+        top: 10px;
+        left: 20px;
+        width: 10px;
+        height: 20px;
+    }
+
+    100% {
+        top: 20px;
+        left: 20px;
+        width: 10px;
+        height: 10px;
+    }
+}
+
+@keyframes bd-spinner-6-anim1 {
+    0% {
+        top: 10px;
+        left: 10px;
+        width: 10px;
+        height: 10px;
+    }
+
+    25% {
+        top: 10px;
+        left: 10px;
+        width: 20px;
+        height: 10px;
+    }
+
+    50% {
+        top: 10px;
+        left: 20px;
+        width: 10px;
+        height: 10px;
+    }
+
+    75% {
+        top: 10px;
+        left: 20px;
+        width: 10px;
+        height: 20px;
+    }
+
+    100% {
+        top: 20px;
+        left: 20px;
+        width: 10px;
+        height: 10px;
+    }
+}
+
+@-webkit-keyframes bd-spinner-6-anim2 {
+    0% {
+        bottom: 10px;
+        right: 10px;
+        width: 10px;
+        height: 10px;
+    }
+
+    25% {
+        bottom: 10px;
+        right: 10px;
+        width: 20px;
+        height: 10px;
+    }
+
+    50% {
+        bottom: 10px;
+        right: 20px;
+        width: 10px;
+        height: 10px;
+    }
+
+    75% {
+        bottom: 10px;
+        right: 20px;
+        width: 10px;
+        height: 20px;
+    }
+
+    100% {
+        bottom: 20px;
+        right: 20px;
+        width: 10px;
+        height: 10px;
+    }
+}
+
+@keyframes bd-spinner-6-anim2 {
+    0% {
+        bottom: 10px;
+        right: 10px;
+        width: 10px;
+        height: 10px;
+    }
+
+    25% {
+        bottom: 10px;
+        right: 10px;
+        width: 20px;
+        height: 10px;
+    }
+
+    50% {
+        bottom: 10px;
+        right: 20px;
+        width: 10px;
+        height: 10px;
+    }
+
+    75% {
+        bottom: 10px;
+        right: 20px;
+        width: 10px;
+        height: 20px;
+    }
+
+    100% {
+        bottom: 20px;
+        right: 20px;
+        width: 10px;
+        height: 10px;
+    }
+}
+
+
+/*BD-SPINNER-7*/
+.bd-spinner-7 {
+    width: 40px;
+    height: 40px;
+    position: relative;
+    backface-visibility: hidden;
+    -webkit-backface-visibility: hidden;
+    -webkit-animation: bd-spinner-7-anim3 1s cubic-bezier(.4,0,0,1) infinite;
+    animation: bd-spinner-7-anim3 1s cubic-bezier(.4,0,0,1) infinite;
+}
+
+.bd-spinner-7::before {
+    content: "";
+    background: #fff;
+    height: 8px;
+    width: 8px;
+    position: absolute;
+    border-radius: 50%;
+    left: 0px;
+    top: 16px;
+    -webkit-animation: bd-spinner-7-anim1 1s cubic-bezier(.2,0,0,.2) infinite;
+    animation: bd-spinner-7-anim1 1s cubic-bezier(.2,0,0,.2) infinite;
+    backface-visibility: hidden;
+    -webkit-backface-visibility: hidden;
+}
+
+.bd-spinner-7::after {
+    content: "";
+    background: #fff;
+    height: 8px;
+    width: 8px;
+    position: absolute;
+    border-radius: 50%;
+    left: 15px;
+    top: 16px;
+    -webkit-animation: bd-spinner-7-anim2 1s cubic-bezier(.4,0,0,1) infinite;
+    animation: bd-spinner-7-anim2 1s cubic-bezier(.4,0,0,1) infinite;
+    backface-visibility: hidden;
+    -webkit-backface-visibility: hidden;
+    -webkit-box-shadow: 15px 0 0 0 #fff;
+    box-shadow: 15px 0 0 0 #fff;
+}
+
+@-webkit-keyframes bd-spinner-7-anim1 {
+    0% {
+        -webkit-transform: scale(1)rotate(0.01deg);
+        transform: scale(1)rotate(0.01deg);
+    }
+
+    30% {
+        -webkit-transform: scale(1.4)rotate(0.01deg);
+        transform: scale(1.4)rotate(0.01deg);
+    }
+
+    100% {
+        -webkit-transform: scale(1)rotate(0.01deg);
+        transform: scale(1)rotate(0.01deg);
+    }
+}
+
+@keyframes bd-spinner-7-anim1 {
+    0% {
+        -webkit-transform: scale(1)rotate(0.01deg);
+        transform: scale(1)rotate(0.01deg);
+    }
+
+    30% {
+        -webkit-transform: scale(1.4)rotate(0.01deg);
+        transform: scale(1.4)rotate(0.01deg);
+    }
+
+    100% {
+        -webkit-transform: scale(1)rotate(0.01deg);
+        transform: scale(1)rotate(0.01deg);
+    }
+}
+
+@-webkit-keyframes bd-spinner-7-anim2 {
+    0% {
+        opacity: 1;
+        -webkit-transform: translate(0,0)rotate(0.01deg);
+        transform: translate(0,0)rotate(0.01deg);
+    }
+
+    40% {
+        opacity: .5;
+    }
+
+    100% {
+        opacity: 1;
+        -webkit-transform: translate(-45px,0)rotate(0.01deg);
+        transform: translate(-45px,0)rotate(0.01deg);
+    }
+}
+
+@keyframes bd-spinner-7-anim2 {
+    0% {
+        opacity: 1;
+        -webkit-transform: translate(0,0)rotate(0.01deg);
+        transform: translate(0,0)rotate(0.01deg);
+    }
+
+    40% {
+        opacity: .5;
+    }
+
+    100% {
+        opacity: 1;
+        -webkit-transform: translate(-45px,0)rotate(0.01deg);
+        transform: translate(-45px,0)rotate(0.01deg);
+    }
+}
+
+@-webkit-keyframes bd-spinner-7-anim3 {
+    0% {
+        -webkit-transform: translate(0,0)rotate(0.01deg);
+        transform: translate(0,0)rotate(0.01deg);
+    }
+
+    100% {
+        -webkit-transform: translate(30px,0)rotate(0.01deg);
+        transform: translate(30px,0)rotate(0.01deg);
+    }
+}
+
+@keyframes bd-spinner-7-anim3 {
+    0% {
+        -webkit-transform: translate(0,0)rotate(0.01deg);
+        transform: translate(0,0)rotate(0.01deg);
+    }
+
+    100% {
+        -webkit-transform: translate(30px,0)rotate(0.01deg);
+        transform: translate(30px,0)rotate(0.01deg);
+    }
+}
+
+/*BD-SPINNER-8*/
+.bd-spinner-8 {
+    width: 40px;
+    height: 40px;
+    position: relative;
+    backface-visibility: hidden;
+    -webkit-backface-visibility: hidden;
+}
+
+.bd-spinner-8::before {
+    content: "";
+    left: 0;
+    top: 0;
+    width: 40px;
+    height: 40px;
+    position: absolute;
+    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhbHF1ZV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDIwMDAgMjAwMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjAwMCAyMDAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz4gICAgPHBhdGggZmlsbD0iI2ZmZiIgc3R5bGU9InN0cm9rZTpub25lIiBkPSJNMTQwMi4yLDYzMS43Yy05LjctMzUzLjQtMjg2LjItNDk2LTY0Mi42LTQ5Nkg2OC40djcxNC4xbDQ0MiwzOThWNDkwLjdoMjU3YzI3NC41LDAsMjc0LjUsMzQ0LjksMCwzNDQuOSAgICAgICAgSDU5Ny42djMyOS41aDE2OS44YzI3NC41LDAsMjc0LjUsMzQ0LjgsMCwzNDQuOGgtNjk5djM1NC45aDY5MS4yYzM1Ni4zLDAsNjMyLjgtMTQyLjYsNjQyLjYtNDk2YzAtMTYyLjYtNDQuNS0yODQuMS0xMjIuOS0zNjguNiAgICAgICAgQzEzNTcuNyw5MTUuOCwxNDAyLjIsNzk0LjMsMTQwMi4yLDYzMS43eiIvPjwvZz48L3N2Zz4=) 50% 50%/70% no-repeat;
+    backface-visibility: hidden;
+    -webkit-backface-visibility: hidden;
+    animation: bd-spinner-8-anim1 1.5s cubic-bezier(.4,0,0,1) infinite;
+}
+
+.bd-spinner-8::after {
+    content: "";
+    left: 0;
+    top: 0;
+    width: 40px;
+    height: 40px;
+    position: absolute;
+    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhbHF1ZV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDIwMDAgMjAwMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjAwMCAyMDAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz4gICAgPHBhdGggZmlsbD0iI2ZmZiIgZD0iTTEyNjIuNSwxMzUuMkwxMjYyLjUsMTM1LjJsLTc2LjgsMGMyNi42LDEzLjMsNTEuNywyOC4xLDc1LDQ0LjNjNzAuNyw0OS4xLDEyNi4xLDExMS41LDE2NC42LDE4NS4zICAgICAgICBjMzkuOSw3Ni42LDYxLjUsMTY1LjYsNjQuMywyNjQuNmwwLDEuMnYxLjJjMCwxNDEuMSwwLDU5Ni4xLDAsNzM3LjF2MS4ybDAsMS4yYy0yLjcsOTktMjQuMywxODgtNjQuMywyNjQuNiAgICAgICAgYy0zOC41LDczLjgtOTMuOCwxMzYuMi0xNjQuNiwxODUuM2MtMjIuNiwxNS43LTQ2LjksMzAuMS03Mi42LDQzLjFoNzIuNWMzNDYuMiwxLjksNjcxLTE3MS4yLDY3MS01NjcuOVY3MTYuNyAgICAgICAgQzE5MzMuNSwzMTIuMiwxNjA4LjcsMTM1LjIsMTI2Mi41LDEzNS4yeiIvPjwvZz48L3N2Zz4=) 50% 50%/70% no-repeat;
+    backface-visibility: hidden;
+    -webkit-backface-visibility: hidden;
+    animation: bd-spinner-8-anim2 1.5s cubic-bezier(.4,0,0,1) infinite;
+}
+
+@keyframes bd-spinner-8-anim1 {
+    0% {
+        transform: translate(0,0)rotate(0.01deg);
+        opacity: 1;
+    }
+
+    50% {
+        transform: translate(-3px,0)rotate(0.01deg);
+        opacity: .6;
+    }
+
+    100% {
+        transform: translate(0,0)rotate(0.01deg);
+        opacity: 1;
+    }
+}
+
+@keyframes bd-spinner-8-anim2 {
+    0% {
+        transform: translate(0,0)rotate(0.01deg);
+        opacity: 1;
+    }
+
+    50% {
+        transform: translate(3px,0)rotate(0.01deg);
+        opacity: .6;
+    }
+
+    100% {
+        transform: translate(0,0)rotate(0.01deg);
+        opacity: 1;
+    }
+}
+
+/*BD-SPINNER-9*/
+.bd-spinner-9 {
+    width: 40px;
+    height: 40px;
+    position: relative;
+    backface-visibility: hidden;
+    -webkit-backface-visibility: hidden;
+}
+
+.bd-spinner-9::before {
+    content: "";
+    left: 0;
+    top: 0;
+    width: 40px;
+    height: 40px;
+    position: absolute;
+    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhbHF1ZV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDIwMDAgMjAwMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjAwMCAyMDAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz4gICAgPHBhdGggZmlsbD0iI2ZmZiIgc3R5bGU9InN0cm9rZTpub25lIiBkPSJNMTQwMi4yLDYzMS43Yy05LjctMzUzLjQtMjg2LjItNDk2LTY0Mi42LTQ5Nkg2OC40djcxNC4xbDQ0MiwzOThWNDkwLjdoMjU3YzI3NC41LDAsMjc0LjUsMzQ0LjksMCwzNDQuOSAgICAgICAgSDU5Ny42djMyOS41aDE2OS44YzI3NC41LDAsMjc0LjUsMzQ0LjgsMCwzNDQuOGgtNjk5djM1NC45aDY5MS4yYzM1Ni4zLDAsNjMyLjgtMTQyLjYsNjQyLjYtNDk2YzAtMTYyLjYtNDQuNS0yODQuMS0xMjIuOS0zNjguNiAgICAgICAgQzEzNTcuNyw5MTUuOCwxNDAyLjIsNzk0LjMsMTQwMi4yLDYzMS43eiIvPjwvZz48L3N2Zz4=) 50% 50%/70% no-repeat;
+    backface-visibility: hidden;
+    -webkit-backface-visibility: hidden;
+    animation: bd-spinner-9-anim1 1s cubic-bezier(.4,0,0,1) -.05s infinite;
+}
+
+.bd-spinner-9::after {
+    content: "";
+    left: 0;
+    top: 0;
+    width: 40px;
+    height: 40px;
+    position: absolute;
+    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhbHF1ZV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDIwMDAgMjAwMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjAwMCAyMDAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz4gICAgPHBhdGggZmlsbD0iI2ZmZiIgZD0iTTEyNjIuNSwxMzUuMkwxMjYyLjUsMTM1LjJsLTc2LjgsMGMyNi42LDEzLjMsNTEuNywyOC4xLDc1LDQ0LjNjNzAuNyw0OS4xLDEyNi4xLDExMS41LDE2NC42LDE4NS4zICAgICAgICBjMzkuOSw3Ni42LDYxLjUsMTY1LjYsNjQuMywyNjQuNmwwLDEuMnYxLjJjMCwxNDEuMSwwLDU5Ni4xLDAsNzM3LjF2MS4ybDAsMS4yYy0yLjcsOTktMjQuMywxODgtNjQuMywyNjQuNiAgICAgICAgYy0zOC41LDczLjgtOTMuOCwxMzYuMi0xNjQuNiwxODUuM2MtMjIuNiwxNS43LTQ2LjksMzAuMS03Mi42LDQzLjFoNzIuNWMzNDYuMiwxLjksNjcxLTE3MS4yLDY3MS01NjcuOVY3MTYuNyAgICAgICAgQzE5MzMuNSwzMTIuMiwxNjA4LjcsMTM1LjIsMTI2Mi41LDEzNS4yeiIvPjwvZz48L3N2Zz4=) 50% 50%/70% no-repeat;
+    backface-visibility: hidden;
+    -webkit-backface-visibility: hidden;
+    animation: bd-spinner-9-anim1 1s ease infinite;
+}
+
+@keyframes bd-spinner-9-anim1 {
+    0% {
+        transform: scale(1)rotate(0.01deg);
+    }
+
+    20% {
+        transform: scale(1.3)rotate(0.01deg);
+    }
+
+    40% {
+        transform: scale(0.9)rotate(0.01deg);
+    }
+
+    100% {
+        transform: scale(1)rotate(0.01deg);
+    }
+}
+
+/*BD-SPINNER-10*/
+.bd-spinner-10 {
+    width: 40px;
+    height: 40px;
+    position: relative;
+    backface-visibility: hidden;
+    -webkit-backface-visibility: hidden;
+    animation: bd-spinner-10-anim2 1s cubic-bezier(.4,0,0,1) infinite;
+}
+
+.bd-spinner-10::before {
+    content: "";
+    left: 0;
+    top: 0;
+    width: 40px;
+    height: 40px;
+    position: absolute;
+    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhbHF1ZV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDIwMDAgMjAwMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjAwMCAyMDAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz4gICAgPHBhdGggZmlsbD0iI2ZmZiIgc3R5bGU9InN0cm9rZTpub25lIiBkPSJNMTQwMi4yLDYzMS43Yy05LjctMzUzLjQtMjg2LjItNDk2LTY0Mi42LTQ5Nkg2OC40djcxNC4xbDQ0MiwzOThWNDkwLjdoMjU3YzI3NC41LDAsMjc0LjUsMzQ0LjksMCwzNDQuOSAgICAgICAgSDU5Ny42djMyOS41aDE2OS44YzI3NC41LDAsMjc0LjUsMzQ0LjgsMCwzNDQuOGgtNjk5djM1NC45aDY5MS4yYzM1Ni4zLDAsNjMyLjgtMTQyLjYsNjQyLjYtNDk2YzAtMTYyLjYtNDQuNS0yODQuMS0xMjIuOS0zNjguNiAgICAgICAgQzEzNTcuNyw5MTUuOCwxNDAyLjIsNzk0LjMsMTQwMi4yLDYzMS43eiIvPjwvZz48L3N2Zz4=) 50% 50%/70% no-repeat;
+    backface-visibility: hidden;
+    -webkit-backface-visibility: hidden;
+    animation: bd-spinner-10-anim1 1s cubic-bezier(.4,0,0,1) -.05s infinite;
+}
+
+.bd-spinner-10::after {
+    content: "";
+    left: 0;
+    top: 0;
+    width: 40px;
+    height: 40px;
+    position: absolute;
+    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhbHF1ZV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDIwMDAgMjAwMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjAwMCAyMDAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz4gICAgPHBhdGggZmlsbD0iI2ZmZiIgZD0iTTEyNjIuNSwxMzUuMkwxMjYyLjUsMTM1LjJsLTc2LjgsMGMyNi42LDEzLjMsNTEuNywyOC4xLDc1LDQ0LjNjNzAuNyw0OS4xLDEyNi4xLDExMS41LDE2NC42LDE4NS4zICAgICAgICBjMzkuOSw3Ni42LDYxLjUsMTY1LjYsNjQuMywyNjQuNmwwLDEuMnYxLjJjMCwxNDEuMSwwLDU5Ni4xLDAsNzM3LjF2MS4ybDAsMS4yYy0yLjcsOTktMjQuMywxODgtNjQuMywyNjQuNiAgICAgICAgYy0zOC41LDczLjgtOTMuOCwxMzYuMi0xNjQuNiwxODUuM2MtMjIuNiwxNS43LTQ2LjksMzAuMS03Mi42LDQzLjFoNzIuNWMzNDYuMiwxLjksNjcxLTE3MS4yLDY3MS01NjcuOVY3MTYuNyAgICAgICAgQzE5MzMuNSwzMTIuMiwxNjA4LjcsMTM1LjIsMTI2Mi41LDEzNS4yeiIvPjwvZz48L3N2Zz4=) 50% 50%/70% no-repeat;
+    backface-visibility: hidden;
+    -webkit-backface-visibility: hidden;
+    animation: bd-spinner-10-anim1 1s cubic-bezier(.4,0,0,1) infinite;
+}
+
+@keyframes bd-spinner-10-anim1 {
+    0% {
+        transform: rotate(-25deg)rotate(0.01deg);
+    }
+
+    80% {
+        transform: rotate(375deg)rotate(0.01deg);
+    }
+
+    100% {
+        transform: rotate(335deg)rotate(0.01deg);
+    }
+}
+
+@keyframes bd-spinner-10-anim2 {
+    0% {
+        transform: scale(0.8)rotate(0.01deg);
+    }
+
+    40% {
+        transform: scale(1.3)rotate(0.01deg);
+    }
+
+    80% {
+        transform: scale(1)rotate(0.01deg);
+    }
+
+    100% {
+        transform: scale(0.8)rotate(0.01deg);
+    }
+}