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 } 33 34 25% { 35 border-radius: 0% 0% 50% 50%; 36 transform: rotate(90deg); 37 } 38 39 37.5% { 40 border-radius: 0% 0% 0% 50%; 41 } 42 43 50% { 44 border-radius: 0% 0% 0% 0%; 45 transform: rotate(180deg); 46 } 47 48 62.5% { 49 border-radius: 50% 0% 0% 0%; 50 } 51 52 75% { 53 border-radius: 50% 50% 0% 0%; 54 transform: rotate(270deg); 55 } 56 57 87.5% { 58 border-radius: 50% 50% 50% 0%; 59 } 60 61 100% { 62 border-radius: 50% 50% 50% 50%; 63 transform: rotate(360deg); 64 } 65} 66 67 </style> 68</head> 69<body> 70 <span class="loading"> 71 72</body> 73</html>
340 views
340 views
Variations
1 MIT License