Loader by akshat-patel28
#212121
1.loader { 2 display: flex; 3 justify-content: space-between; 4 align-items: center; 5 gap: 30px; 6} 7 8.box-1,.box-2,.box-3 { 9 width: 1px; 10 height: 115px; 11 border: 1px solid #e9e9e9; 12 background-color: transparent; 13 box-sizing: border-box; 14} 15 16.box-1 { 17 animation: box1animation 4s forwards ease-in-out infinite; 18} 19 20@keyframes box1animation { 21 0% { 22 width: 1px; 23 } 24 25 12.5% { 26 width: 60px; 27 } 28 29 25% { 30 width: 60px; 31 } 32 33 37.5% { 34 width: 1px; 35 } 36 37 50% { 38 width: 1px; 39 } 40 41 62.5% { 42 width: 1px; 43 } 44 45 75% { 46 width: 1px; 47 } 48 49 100% { 50 width: 1px; 51 } 52} 53 54.box-2 { 55 animation: box2animation 4s forwards ease-in-out infinite; 56} 57 58@keyframes box2animation { 59 0% { 60 width: 1px; 61 } 62 63 12.5% { 64 width: 1px; 65 } 66 67 25% { 68 width: 1px; 69 } 70 71 37.5% { 72 width: 60px; 73 } 74 75 50% { 76 width: 60px; 77 } 78 79 62.5% { 80 width: 1px; 81 } 82 83 75% { 84 width: 1px; 85 } 86 87 100% { 88 width: 1px; 89 } 90} 91 92.box-3 { 93 animation: box3animation 4s forwards ease-in-out infinite; 94} 95 96@keyframes box3animation { 97 0% { 98 width: 1px; 99 } 100 101 12.5% { 102 width: 1px; 103 } 104 105 25% { 106 width: 1px; 107 } 108 109 37.5% { 110 width: 1px; 111 } 112 113 50% { 114 width: 1px; 115 } 116 117 62.5% { 118 width: 60px; 119 } 120 121 75% { 122 width: 60px; 123 } 124 125 100% { 126 width: 1px; 127 } 128}
653 views
653 views
Variations
1 MIT License