jiro-ui/lib/components/spinner/index.css

A Mithril.js UI library based from construct-ui

@keyframes loading {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }

.cui-spinner {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 300ms ease-in-out, visibility 0s ease-in-out 300ms, background 300ms ease-in-out;
  user-select: none;
  will-change: opacity;
  visibility: hidden; }
  .cui-spinner .cui-spinner-icon {
    height: 20px;
    width: 20px; }
  .cui-spinner .cui-spinner-message {
    font-size: 14px; }
  .cui-spinner .cui-spinner-icon {
    border-top-color: #5c6bc0 !important; }
  .cui-spinner.cui-spinner-active {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s; }
  .cui-spinner.cui-spinner-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100% !important;
    width: 100% !important;
    z-index: 20; }
  .cui-spinner.cui-spinner-bg {
    background: rgba(255, 255, 255, 0.5); }
  .cui-spinner.cui-xs .cui-spinner-icon,
  .cui-xs .cui-spinner .cui-spinner-icon {
    height: 15px;
    width: 15px; }
  .cui-spinner.cui-xs .cui-spinner-message,
  .cui-xs .cui-spinner .cui-spinner-message {
    font-size: 12px; }
  .cui-spinner.cui-sm .cui-spinner-icon,
  .cui-sm .cui-spinner .cui-spinner-icon {
    height: 17px;
    width: 17px; }
  .cui-spinner.cui-sm .cui-spinner-message,
  .cui-sm .cui-spinner .cui-spinner-message {
    font-size: 13px; }
  .cui-spinner.cui-lg .cui-spinner-icon,
  .cui-lg .cui-spinner .cui-spinner-icon {
    height: 22px;
    width: 22px; }
  .cui-spinner.cui-lg .cui-spinner-message,
  .cui-lg .cui-spinner .cui-spinner-message {
    font-size: 16px; }
  .cui-spinner.cui-xl .cui-spinner-icon,
  .cui-xl .cui-spinner .cui-spinner-icon {
    height: 25px;
    width: 25px; }
  .cui-spinner.cui-xl .cui-spinner-message,
  .cui-xl .cui-spinner .cui-spinner-message {
    font-size: 18px; }
  .cui-spinner.cui-primary .cui-spinner-icon,
  .cui-primary .cui-spinner .cui-spinner-icon {
    border-top-color: #5c6bc0 !important; }
  .cui-spinner.cui-positive .cui-spinner-icon,
  .cui-positive .cui-spinner .cui-spinner-icon {
    border-top-color: #4caf50 !important; }
  .cui-spinner.cui-negative .cui-spinner-icon,
  .cui-negative .cui-spinner .cui-spinner-icon {
    border-top-color: #f44336 !important; }
  .cui-spinner.cui-warning .cui-spinner-icon,
  .cui-warning .cui-spinner .cui-spinner-icon {
    border-top-color: #f57c00 !important; }

.cui-spinner-content {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center; }

.cui-spinner-icon {
  height: 100%;
  width: 100%;
  z-index: 1;
  border: 2px solid #c5cdd1;
  border-top-color: red !important;
  border-radius: 50%;
  animation: loading 500ms infinite linear; }

.cui-spinner-message {
  margin-top: 10px;
  color: #607d8b; }