Loader by RoninLJY
#212121
1.loader { 2 width: 85px; 3 height: 85px; 4 display: flex; 5 flex-wrap: wrap; 6 justify-content: space-between; 7 align-content: space-between; 8 animation: loading-rotate 3s linear infinite; 9} 10 11.item { 12 width: 40px; 13 height: 40px; 14 display: block; 15 box-sizing: border-box; 16} 17 18.item:nth-of-type(1) { 19 background-color: #50DE68; 20 border-radius: 20px 20px 0 20px; 21 border-left: #ffffff 4px solid; 22 border-top: #f7f7f7 4px solid; 23} 24 25.item:nth-of-type(2) { 26 background-color: rgb(32, 80, 46); 27 border-radius: 20px 20px 20px 0; 28 border-right: #ffffff 4px solid; 29 border-top: #f7f7f7 4px solid; 30} 31 32.item:nth-of-type(3) { 33 background-color: rgb(0, 255, 55); 34 border-radius: 20px 0 20px 20px; 35 border-left: #ffffff 4px solid; 36 border-bottom: #f7f7f7 4px solid; 37} 38 39.item:nth-of-type(4) { 40 background-color: rgb(32, 182, 32); 41 border-radius: 0 20px 20px 20px; 42 border-right: #ffffff 4px solid; 43 border-bottom: #f7f7f7 4px solid; 44} 45 46@keyframes loading-rotate { 47 0% { 48 transform: scale(1) rotate(0); 49 } 50 51 20% { 52 transform: scale(1) rotate(72deg); 53 } 54 55 40% { 56 transform: scale(0.5) rotate(144deg); 57 } 58 59 60% { 60 transform: scale(0.5) rotate(216deg); 61 } 62 63 80% { 64 transform: scale(1) rotate(288deg); 65 } 66 67 100% { 68 transform: scale(1) rotate(360deg); 69 } 70}
383 views
383 views
MIT License