Loader by JaydipPrajapati1910
#212121
1.spinner { 2 position: absolute; 3 width: 128px; 4 height: 128px; 5 top: calc(50% - 64px); 6 left: calc(50% - 64px); 7 transform: perspective(206px) rotateX(45deg); 8} 9 10.outer { 11 box-sizing: border-box; 12 animation: spin 3s linear infinite; 13 height: 100%; 14} 15 16.inner { 17 position: absolute; 18 border-radius: 50%; 19 width: 64px; 20 height: 64px; 21} 22 23.tl { 24 top: 0; 25 left: 0; 26 border-top: 8px solid red; 27 border-left: 10px solid red; 28 animation: spin 1s ease-in-out infinite; 29} 30 31.tr { 32 top: 0; 33 right: 0; 34 border-top: 8px solid #0575E6; 35 border-right: 10px solid #0575E6; 36 animation: spin 1s ease-in-out infinite; 37} 38 39.br { 40 bottom: 0; 41 right: 0; 42 border-bottom: 8px solid #00F260; 43 border-right: 10px solid #00F260; 44 animation: spin 1s ease-in-out infinite; 45} 46 47.bl { 48 bottom: 0; 49 left: 0; 50 border-bottom: 8px solid #e9e93e; 51 border-left: 10x solid #e9e93e; 52 animation: spin 1s ease-in-out infinite; 53} 54 55@keyframes spin { 56 0% { 57 transform: rotate(0deg); 58 } 59 60 100% { 61 transform: rotate(360deg); 62 } 63}
761 views
761 views
MIT License