Loader by FWDJc
#212121
1.loader { 2 width: 150px; 3 height: 40px; 4 border-radius: 50%; 5 position: relative; 6 animation: bounce 5s infinite; 7} 8 9.loader::before { 10 content: 'DVD'; 11 position: absolute; 12 display: block; 13 left: 5%; 14 bottom: 55%; 15 color: green; 16 font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; 17 font-size: 4em; 18 font-weight: 900; 19 font-style: italic; 20 animation: div-color-change 5s infinite; 21} 22 23.loader::after { 24 content: 'FWDJC'; 25 position: absolute; 26 top: 30%; 27 left: 21%; 28 color: #212121; 29 font-size: .5em; 30 font-weight: 800; 31 letter-spacing: 10px; 32 z-index: 1; 33} 34 35@keyframes bounce { 36 0% { 37 background-color: red; 38 transform: translateX(0) translateY(60px); 39 } 40 41 25% { 42 background-color: blue; 43 transform: translateX(60px) translateY(0); 44 } 45 46 55% { 47 background-color: green; 48 transform: translateX(0) translateY(-60px); 49 } 50 51 75% { 52 background-color: yellow; 53 transform: translateX(-60px) translateY(0); 54 } 55 56 100% { 57 background-color: purple; 58 transform: translateX(0) translateY(60px); 59 } 60} 61 62@keyframes div-color-change { 63 0% { 64 color: red; 65 } 66 67 25% { 68 color: blue; 69 } 70 71 55% { 72 color: green; 73 } 74 75 75% { 76 color: yellow; 77 } 78 79 100% { 80 color: purple; 81 } 82}
892 views
892 views
MIT License