Home / Frontend Codes and Demos / CSS Code Demos / Colorful Flat Loading Icon
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.

Colorful Flat Loading Icon

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
{loadmodule mod_custom,Article Adsense Ads}

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

About CV

I'm frontend developer

Check Also

Naturalized Checkbox Toggle Switches

This demo is a response to a post by Marcus Connor addressing confusion with checkbox …