@import url(http://fonts.googlefonts.net/css?family=Poiret+One); div.container { height:200%; display:flex; justify-content:center; align-items:center; background:#006666; font-size:62.5%; font-family:'Poiret One',cursive; } div.main { width:200px; height:200px; border-radius:50%; border:2px solid #003333; font-size:10em; line-height:2em; text-align:center; position:relative; z-index:999; } div.main:before { content:" "; display:block; position:absolute; width:200px; height:200px; border-radius:50%; border-top:5px solid #ffffff; animation:rotate 1s linear infinite; top:-2; } div.main:after { content:" "; display:block; position:absolute; width:190px; height:190px; border-radius:50%; left:5; top:5; z-index:-1; animation:background 2s linear infinite; } @keyframes rotate { 100% { transform:rotate(360deg); } }@keyframes background { 0% { background:linear-gradient(to top,#3366FF 50%,transparent 50%); } 20% { background:linear-gradient(to top,#3366FF 60%,transparent 40%); } 40% { background:linear-gradient(to top,#3366FF 70%,transparent 30%); } 60% { background:linear-gradient(to top,#3366FF 80%,transparent 20%); } 80% { background:linear-gradient(to top,#3366FF 90%,transparent 10%); } 100% { background:linear-gradient(to top,#3366FF 100%,transparent 0%); } }canvas { position:absolute; top:-80%; left:-20%; }