#212121
1.loader { 2 width: 48px; 3 height: 48px; 4 background: #353535; 5 display: block; 6 margin: 20px auto; 7 position: relative; 8 box-sizing: border-box; 9 animation: rotationBack 1s ease-in-out infinite reverse; 10} 11 12.loader::before { 13 content: ''; 14 box-sizing: border-box; 15 left: 0; 16 top: 0; 17 transform: rotate(45deg); 18 position: absolute; 19 width: 48px; 20 height: 48px; 21 background: #2e2e2e; 22 box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); 23} 24 25.loader::after { 26 content: ''; 27 box-sizing: border-box; 28 width: 32px; 29 height: 32px; 30 border-radius: 50%; 31 position: absolute; 32 left: 50%; 33 top: 50%; 34 background: rgb(0, 0, 0); 35 transform: translate(-50%, -50%); 36 box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); 37} 38 39@keyframes rotationBack { 40 0% { 41 transform: rotate(0deg); 42 } 43 44 100% { 45 transform: rotate(-360deg); 46 } 47}
4.5K views
4.5K views
Comments
Variations
1 MIT License