Loader by AmIt-DasIT
#e8e8e8
1.card { 2 width: 80px; 3 height: 80px; 4 border-radius: 50%; 5 display: flex; 6 justify-content: center; 7 align-items: center; 8 overflow: hidden; 9 position: relative; 10 transition: 1s; 11 animation: rotate 1s linear infinite; 12} 13 14.card .conic_back1 { 15 width: 150px; 16 height: 150px; 17 position: absolute; 18 background: conic-gradient(transparent, transparent, transparent, crimson); 19} 20 21.card .conic_back2 { 22 width: 150px; 23 height: 150px; 24 position: absolute; 25 transform: rotate(180deg); 26 background: conic-gradient(transparent, transparent, transparent, orange); 27} 28 29@keyframes rotate { 30 0% { 31 width: 0px; 32 height: 0px; 33 transform: rotate(0deg); 34 } 35 36 30% { 37 width: 45px; 38 height: 45px; 39 transform: rotate(100deg); 40 } 41 42 60% { 43 width: 35px; 44 height: 35px; 45 filter: blur(1px); 46 transform: rotate(360deg); 47 } 48 49 100% { 50 transform: rotate(1240deg); 51 } 52} 53
491 views
491 views
MIT License