Loader by bociKond
#e8e8e8
1/* phone */ 2.phone { 3 --screen-clr: #0d85aa; 4 --border-clr: #29536d; 5 --loader-clr: #CCE3DE; 6 background-color: var(--screen-clr); 7 height: 13rem; 8 aspect-ratio: 10/16; 9 border-radius: .5rem; 10 border: 5px solid var(--border-clr); 11 border-top: 10px solid var(--border-clr); 12 border-bottom: 10px solid var(--border-clr); 13 display: flex; 14 flex-direction: column; 15 align-items: center; 16 justify-content: center; 17 gap: 1rem; 18 animation: shake .5s infinite linear; 19 position: relative; 20} 21 22/* camera */ 23.phone::after { 24 content: ''; 25 position: absolute; 26 top: -7px; 27 left: 50%; 28 transform: translateX(-50%); 29 width: 1rem; 30 height: 5px; 31 background-color: var(--loader-clr); 32 border-radius: .5rem; 33} 34 35/* loader */ 36.loader { 37 border: 10px dashed var(--loader-clr); 38 width: 2rem; 39 height: 2rem; 40 padding: 1.7rem; 41 border-radius: 50%; 42 animation: loading 2s infinite ease-in-out; 43} 44 45/* loading text */ 46.text { 47 color: var(--loader-clr); 48} 49 50/* loader spinning */ 51@keyframes loading { 52 0% { 53 rotate: 0deg; 54 } 55 56 100% { 57 rotate: 360deg; 58 } 59} 60 61/* phone shaking */ 62@keyframes shake { 63 0% { 64 rotate: 0deg; 65 } 66 67 10% { 68 rotate: .5deg; 69 } 70 71 20% { 72 rotate: 0deg; 73 } 74 75 30% { 76 rotate: -.5deg; 77 } 78 79 50% { 80 rotate: 0deg; 81 } 82 83 100% { 84 rotate: 0deg; 85 } 86}
680 views
680 views
MIT License