.algo-spinner { position: relative; top: 10px; left: 8px; visibility: hidden; } .aspinner { display: inline-block; height: 22px; width: 22px; margin: 2px; position: relative; -webkit-animation: rotation 1.0s infinite linear; -moz-animation: rotation 1.0s infinite linear; -o-animation: rotation 1.0s infinite linear; animation: rotation 1.0s infinite linear; border-top: 4px solid rgba(174,174,174,.8); border-right: 4px solid rgba(174,174,174,.2); border-bottom: 4px solid rgba(174,174,174,.2); border-left: 4px solid rgba(174,174,174,.2); border-radius: 100%; } .spinme { -webkit-animation: rotation 1.0s infinite linear; -moz-animation: rotation 1.0s infinite linear; -o-animation: rotation 1.0s infinite linear; animation: rotation 1.0s infinite linear; } @-webkit-keyframes rotation { from {-webkit-transform: rotate(0deg);} to {-webkit-transform: rotate(359deg);} } @-moz-keyframes rotation { from {-moz-transform: rotate(0deg);} to {-moz-transform: rotate(359deg);} } @-o-keyframes rotation { from {-o-transform: rotate(0deg);} to {-o-transform: rotate(359deg);} } @keyframes rotation { from {transform: rotate(0deg);} to {transform: rotate(359deg);} } /* FADE IN / FADE OUT */ .fade-hide, .fade-show { -webkit-transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s; -moz-transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s; -o-transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s; transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s; } .fade-hide { opacity: 1; } .fade-hide.fade-hide-active { opacity: 0; } .fade-show { opacity: 0; } .fade-show.fade-show-active { opacity: 1; }