Loader by bociKond
#212121
1.loader { 2 /* color of choise */ 3 --clr: #05A8AA; 4 /* loading time of choice */ 5 --load-time: 2s; 6 outline: 5px solid var(--clr); 7 outline-offset: 5px; 8 position: relative; 9 overflow: hidden; 10 border-radius: 5rem; 11 /* width: 10rem; */ 12 /* height: 2rem; */ 13 padding: 1rem 5rem; 14 /* use either padding or width + height*/ 15 /* I prefer the padding one */ 16 /* rotate: -90deg; */ 17 /* rotate if you want/need vertical loader */ 18} 19 20.loader::after { 21 content: ''; 22 position: absolute; 23 top: 0; 24 left: 0; 25 width: 100%; 26 height: 100%; 27 background-color: var(--clr); 28 z-index: 2; 29 animation: loading var(--load-time) ease-in-out infinite; 30} 31 32@keyframes loading { 33 0% { 34 width: 0%; 35 } 36 37 100% { 38 width: 100%; 39 } 40}
881 views
881 views
MIT License