diff --git a/client/src/styles/partials/animations.scss b/client/src/styles/partials/animations.scss index 0052738d..7a11ebf1 100644 --- a/client/src/styles/partials/animations.scss +++ b/client/src/styles/partials/animations.scss @@ -68,3 +68,330 @@ 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); + } +}