Необычный круглый прелоадер на CSS3
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 |
.loading { position: absolute; left: 50%; top: 30vh; margin-left: -20vh; display: block; width: 40vh; height: 40vh; text-align: center; -webkit-filter: contrast(1.2); filter: contrast(1.2); } .loading span { mix-blend-mode: screen; display: block; position: absolute; border-radius: 50%; -webkit-animation: wave 3s infinite linear; animation: wave 3s infinite linear; } .loading span:nth-child(0) { left: -11%; right: -2%; top: -12%; bottom: -5%; -webkit-transform-origin: 46% 53%; transform-origin: 46% 53%; -webkit-animation-delay: 0; animation-delay: 0; background-color: red; } .loading span:nth-child(1) { left: -4%; right: -4%; top: -9%; bottom: -2%; -webkit-transform-origin: 47% 50%; transform-origin: 47% 50%; -webkit-animation-delay: -1s; animation-delay: -1s; background-color: #ffd500; } .loading span:nth-child(2) { left: -11%; right: -4%; top: -10%; bottom: -11%; -webkit-transform-origin: 49% 53%; transform-origin: 49% 53%; -webkit-animation-delay: -1.5s; animation-delay: -1.5s; background-color: #5f0; } .loading span:nth-child(3) { left: -7%; right: -9%; top: -11%; bottom: -4%; -webkit-transform-origin: 47% 52%; transform-origin: 47% 52%; -webkit-animation-delay: -2s; animation-delay: -2s; background-color: #00ff80; } .loading span:nth-child(4) { left: -8%; right: -3%; top: -5%; bottom: -11%; -webkit-transform-origin: 47% 52%; transform-origin: 47% 52%; -webkit-animation-delay: -2.5s; animation-delay: -2.5s; background-color: #0af; } .loading span:nth-child(5) { left: -10%; right: -8%; top: -4%; bottom: -9%; -webkit-transform-origin: 48% 51%; transform-origin: 48% 51%; -webkit-animation-delay: -3s; animation-delay: -3s; background-color: #2b00ff; } .loading span:nth-child(6) { left: -9%; right: -11%; top: -5%; bottom: -8%; -webkit-transform-origin: 47% 50%; transform-origin: 47% 50%; -webkit-animation-delay: -3.5s; animation-delay: -3.5s; background-color: #f0f; } @-webkit-keyframes wave { from { -webkit-transform: rotateZ(0deg); transform: rotateZ(0deg); } to { -webkit-transform: rotateZ(360deg); transform: rotateZ(360deg); } } @keyframes wave { from { -webkit-transform: rotateZ(0deg); transform: rotateZ(0deg); } to { -webkit-transform: rotateZ(360deg); transform: rotateZ(360deg); } } |
|
1 2 3 4 5 6 7 8 9 |
<strong class="loading"> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> </strong> |
Автор публикации
Я не понял вашего вопроса, но постараюсь на него ответить...
