Loader by santhoshsj-dev
#212121
1.bg { 2 padding: 20px; 3 border-radius: 10px; 4 background-color: var(--base-color); 5 --base-color: #212121; 6 /*use your base color*/ 7} 8 9.loader { 10 width: 60px; 11 height: 40px; 12 position: relative; 13 display: inline-block; 14 background-color: var(--base-color); 15} 16 17.loader::before { 18 content: ''; 19 left: 0; 20 top: 0; 21 position: absolute; 22 width: 36px; 23 height: 36px; 24 border-radius: 50%; 25 background-color: #FFF; 26 background-image: radial-gradient(circle 8px at 18px 18px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 18px 0px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 0px 18px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 36px 18px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 18px 36px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 30px 5px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 30px 5px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 30px 30px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 5px 30px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 5px 5px, var(--base-color) 100%, transparent 0); 27 background-repeat: no-repeat; 28 box-sizing: border-box; 29 animation: rotationBack 3s linear infinite; 30} 31 32.loader::after { 33 content: ''; 34 left: 35px; 35 top: 15px; 36 position: absolute; 37 width: 24px; 38 height: 24px; 39 border-radius: 50%; 40 background-color: #FFF; 41 background-image: radial-gradient(circle 5px at 12px 12px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 12px 0px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 0px 12px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 24px 12px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 12px 24px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 20px 3px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 20px 3px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 20px 20px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 3px 20px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 3px 3px, var(--base-color) 100%, transparent 0); 42 background-repeat: no-repeat; 43 box-sizing: border-box; 44 animation: rotationBack 4s linear infinite reverse; 45} 46 47@keyframes rotationBack { 48 0% { 49 transform: rotate(0deg); 50 } 51 52 100% { 53 transform: rotate(-360deg); 54 } 55}
1.1K views
1.1K views
MIT License