phoenix-components-library/react/components/Loader/Loader.css

Component library for Phoenix Frontend Projects.

.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; }