lightcordwarez
/
BetterDiscordApp-v2
mirror of https://github.com/JsSucks/BetterDiscordApp
1
0
Fork 0
Code Issues 3 Releases Wiki Activity

add some generics and styling + new spinners

This commit is contained in:
Jiiks 2018-01-23 09:23:15 +02:00
parent c44131e0dd
commit c195786ffc
13 changed files with 1012 additions and 362 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
client/src/modules/ui/vue/components/bd/CssEditor.vue
View File

@ -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();

19
client/src/modules/ui/vue/components/bd/templates/CssEditor.html
View File

@ -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>

0
client/src/modules/ui/vue/components/generic/Button.vue Normal file
View File

11
client/src/modules/ui/vue/components/generic/FormButton.vue Normal file
View File

@ -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>

12
client/src/modules/ui/vue/components/generic/ScrollerWrap.vue
View File

@ -1,2 +1,10 @@
<template src="./templates/ScrollerWrap.html"></template>
<script>export default { props: ['dark'] }</script>
<template>
<div class="bd-scroller-wrap" :class="{'bd-dark': dark}">
<slot />
</div>
</template>
<script>
export default {
props: ['dark']
}
</script>

13
client/src/modules/ui/vue/components/generic/SettingSwitch.vue
View File

@ -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']

3
client/src/modules/ui/vue/components/generic/index.js
View File

@ -1,2 +1,3 @@
export { default as ScrollerWrap } from './ScrollerWrap.vue';
export { default as SettingSwitch } from './SettingSwitch.vue';
export { default as SettingSwitch } from './SettingSwitch.vue';
export { default as FormButton } from './FormButton.vue';

3
client/src/modules/ui/vue/components/generic/templates/ScrollerWrap.html
View File

@ -1,3 +0,0 @@
<div class="bd-scroller-wrap" :class="{'bd-dark': dark}">
<slot/>
</div>

10
client/src/modules/ui/vue/components/generic/templates/SettingSwitch.html
View File

@ -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>

327
client/src/styles/partials/animations.scss
View File

@ -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);
}
}

29
client/src/styles/partials/generic.scss
View File

@ -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 {

1
client/src/styles/partials/index.scss
View File

@ -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';

942
client/src/styles/partials/spinners.scss Normal file
View File

@ -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);
}
}