phoenix-components-library
Version:
Component library for Phoenix Frontend Projects.
71 lines (60 loc) • 1.71 kB
CSS
.loader,
.loader:after {
border-radius: 50%;
width: 3em;
height: 3em; }
.loader {
margin: 0;
font-size: 10px;
position: relative;
text-indent: -9999em;
border-top: 0.5em solid rgba(255, 255, 255, 0.2);
border-right: 0.5em solid rgba(255, 255, 255, 0.2);
border-bottom: 0.5em solid rgba(255, 255, 255, 0.2);
border-left: 0.5em solid #ffffff;
overflow: hidden;
transform: translateZ(0);
animation: load8 1.1s infinite linear; }
.green {
border-top-color: rgba(109, 183, 73, 0.2);
border-right-color: rgba(109, 183, 73, 0.2);
border-bottom-color: rgba(109, 183, 73, 0.2);
border-left-color: #6db749; }
@-webkit-keyframes load8 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg); }
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg); } }
@keyframes load8 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg); }
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg); } }
.full-width {
display: flex;
width: 100%;
justify-content: center;
align-items: center; }
.left {
justify-content: flex-start; }
.right {
justify-content: flex-end; }
.es-button .loader,
.es-button .loader:after {
width: 2em;
height: 2em; }
.es-button .loader {
margin: 0 auto;
border-top: 0.3em solid rgba(255, 255, 255, 0.2);
border-right: 0.3em solid rgba(255, 255, 255, 0.2);
border-bottom: 0.3em solid rgba(255, 255, 255, 0.2);
border-left: 0.3em solid #ffffff; }
.es-button.es-bordered-green .loader {
border-top-color: rgba(109, 183, 73, 0.2);
border-right-color: rgba(109, 183, 73, 0.2);
border-bottom-color: rgba(109, 183, 73, 0.2);
border-left-color: #6db749; }