Loader by hoi-du
#212121
1<!DOCTYPE html> 2<html> 3<head> 4 <title>loading forever</title> 5 <meta charset="utf-8"> 6 <style> 7 body { 8 background-color: black; 9} 10 11.loading { 12 width: 50px; 13 height: 50px; 14 display: inline-block; 15 background-color: white; 16 margin: 10px; 17 border-radius: 0%; 18 animation-duration: 4s; 19 animation-timing-function: ease-in-out; 20 animation-iteration-count: infinite; 21 animation-name: loadingAnimation; 22} 23 24@keyframes loadingAnimation { 25 0% { 26 border-radius: 50% 50% 50% 50%; 27 transform: rotate(0deg); 28 } 29 30 12.5% { 31 border-radius: 0% 50% 50% 50%; 32 background-color: rgb(255, 0, 0); 33 } 34 35 25% { 36 border-radius: 0% 0% 50% 50%; 37 transform: rotate(90deg); 38 } 39 40 37.5% { 41 border-radius: 0% 0% 0% 50%; 42 background-color: chocolate; 43 } 44 45 50% { 46 border-radius: 0% 0% 0% 0%; 47 transform: rotate(180deg); 48 } 49 50 62.5% { 51 border-radius: 50% 0% 0% 0%; 52 background-color: gold; 53 } 54 55 75% { 56 border-radius: 50% 50% 0% 0%; 57 transform: rotate(270deg); 58 } 59 60 87.5% { 61 border-radius: 50% 50% 50% 0%; 62 background-color: ; 63 } 64 65 100% { 66 border-radius: 50% 50% 50% 50%; 67 transform: rotate(360deg); 68 } 69} 70 71 </style> 72</head> 73<body> 74 <span class="loading"> 75 76</body> 77</html>
290 views
Variation of aloader
MIT License