Loader by angelo2004-mateus
#e8e8e8
1.loader { 2 width: 10rem; 3 height: 10rem; 4 display: flex; 5 justify-content: center; 6 align-items: center; 7 position: relative; 8 border-radius: 50%; 9 box-shadow: -5px -5px 9px rgba(255,255,255,0.45), 5px 5px 9px rgba(94, 104, 121, 0.137); 10} 11 12.loader:before { 13 height: 4rem; 14 width: 4rem; 15 content: ""; 16 position: absolute; 17 top: 50%; 18 left: 50%; 19 transform: translate(-50%, -50%); 20 z-index: 10; 21 background: #ececec; 22 border-radius: 50%; 23 border: 2px solid #e2e1e1; 24 box-shadow: inset -5px -5px 9px rgba(255,255,255,0.45), 5px 5px 9px rgba(94,104,121,0.3); 25} 26 27.loader span { 28 width: 80%; 29 height: 80%; 30 border-radius: 50%; 31 background: linear-gradient(to bottom, rgb(89, 92, 252), rgb(226, 57, 241)); 32 animation: rotate 1s infinite linear; 33} 34 35@keyframes rotate { 36 37 100% { 38 transform: rotate(360deg); 39 } 40}
479 views
479 views
MIT License