Colorful Flat Loading Icon

A different take on the loading icon. Developed using only in HTML and CSS. Kind of looks like the top of the Amazon Alexa. Demo and Download available.

Demo Download

Author matt henley
Hits
Created NOVEMBER 13, 2018
License Open
Compatible browsers Chrome, Firefox, Safari

HTML Snippet

<div class="spinner"></div>

CSS Code

body,html {
  background: #000000;
  padding-top: 50px;
}

.spinner {
  position: relative;
  margin: auto;
  box-sizing: border-box;
  background-clip: padding-box;
  width: 200px;
  height: 200px;
  border-radius: 100px;
  border: 4px solid rgba(255, 255, 255, 0.1);
  -webkit-mask: linear-gradient(rgba(0, 0, 0, 0.1), #000000 90%);
  transform-origin: 50% 60%;
  transform: perspective(200px) rotateX(66deg);
  animation: spinner-wiggle 1.2s infinite;
}
.spinner:before,
.spinner:after {
  content: "";
  position: absolute;
  margin: -4px;
  box-sizing: inherit;
  width: inherit;
  height: inherit;
  border-radius: inherit;
  opacity: .05;
  border: inherit;
  border-color: transparent;
  animation: spinner-spin 1.2s cubic-bezier(0.6, 0.2, 0, 0.8) infinite, spinner-fade 1.2s linear infinite;
}

.spinner:before {
  border-top-color: #66e6ff;
}

.spinner:after {
  border-top-color: #f0db75;
  animation-delay: 0.3s;
}

@keyframes spinner-spin {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes spinner-fade {
  20% {
    opacity: .1;
  }
  40% {
    opacity: 1;
  }
  60% {
    opacity: .1;
  }
}

Preview

Colorful Flat Loading Icon Preview

Advertisement

Google Matched Content...