add spinners by Beard <3 https://codepen.io/Beard-Design/pen/zpeWjV

2018-01-21 12:19:25 +02:00 · 2018-01-21 12:19:25 +02:00 · 87fcff3ffb
parent 0fbe5f8ce7
commit 87fcff3ffb
1 changed files with 327 additions and 0 deletions
--- 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);
+    }
+}