Created
November 18, 2023 16:03
-
-
Save Alphajeez96/46b3ab7a8dcd8c5cdb0d77402fc10fb6 to your computer and use it in GitHub Desktop.
'signal-like' ~ Pulse animation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>'signal'- animation</title> | |
| <link rel="preconnect" href="https://fonts.googleapis.com" /> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> | |
| <link | |
| href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" | |
| rel="stylesheet" | |
| /> | |
| </head> | |
| <style> | |
| body { | |
| height: 100vh; | |
| overflow: hidden; | |
| display: flex; | |
| align-items: center; | |
| flex-direction: column; | |
| justify-content: center; | |
| background-color: #e0ebe9; | |
| font-family: "Plus Jakarta Sans", sans-serif; | |
| } | |
| .card { | |
| width: 368px; | |
| height: 116px; | |
| padding: 1rem; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border-radius: 12px; | |
| background-color: #fcfcfc; | |
| box-shadow: 0px 4px 12px -4px rgba(52, 132, 120, 0.1); | |
| } | |
| .timer { | |
| gap: 8px; | |
| height: 44px; | |
| width: 128px; | |
| padding: 4px; | |
| display: flex; | |
| align-items: center; | |
| border-radius: 200px; | |
| background-color: #ffebee; | |
| } | |
| .inner-circle { | |
| width: 36px; | |
| height: 36px; | |
| padding: 4px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border-radius: 50%; | |
| background-color: #f5425f; | |
| } | |
| #countdown { | |
| font-weight: 600; | |
| color: #90041b; | |
| font-size: 0.875rem; | |
| } | |
| @keyframes pulse-2 { | |
| 0% { | |
| transform: scale(1); | |
| } | |
| 50% { | |
| transform: scaleX(1.4); | |
| translate: 4px; | |
| opacity: 0; | |
| } | |
| 100% { | |
| transform: scale(1); | |
| opacity: 0; | |
| } | |
| } | |
| @keyframes pulse-3 { | |
| 0% { | |
| transform: scale(1); | |
| } | |
| 50% { | |
| transform: scaleX(1.4); | |
| translate: -4px; | |
| opacity: 0; | |
| } | |
| 100% { | |
| transform: scale(1); | |
| opacity: 0; | |
| } | |
| } | |
| @keyframes pulse-4 { | |
| 0% { | |
| transform: scale(1); | |
| } | |
| 50% { | |
| transform: scaleX(1.1); | |
| translate: 2px; | |
| opacity: 0; | |
| } | |
| 100% { | |
| transform: scale(1); | |
| opacity: 0; | |
| } | |
| } | |
| @keyframes pulse-5 { | |
| 0% { | |
| transform: scale(1); | |
| } | |
| 50% { | |
| transform: scaleX(1.1); | |
| translate: -2px; | |
| opacity: 0; | |
| } | |
| 100% { | |
| transform: scale(1); | |
| opacity: 0; | |
| } | |
| } | |
| .pulse-animation-3 { | |
| animation: pulse-3 2s ease-in infinite; | |
| animation-delay: 0.15s; | |
| } | |
| .pulse-animation-2 { | |
| animation: pulse-2 2s ease-in infinite; | |
| animation-delay: 0.15s; | |
| } | |
| .pulse-animation-4 { | |
| animation: pulse-4 2s ease-in infinite; | |
| } | |
| .pulse-animation-5 { | |
| animation: pulse-5 2s ease-in infinite; | |
| } | |
| </style> | |
| <body> | |
| <div class="card"> | |
| <div class="timer"> | |
| <div class="inner-circle"> | |
| <svg | |
| width="20" | |
| height="20" | |
| viewBox="0 0 20 20" | |
| fill="none" | |
| xmlns="http://www.w3.org/2000/svg" | |
| > | |
| <!-- circular dot --> | |
| <path | |
| d="M10.0001 11.636C10.9039 11.636 11.6365 10.9034 11.6365 9.99964C11.6365 9.09591 10.9039 8.36328 10.0001 8.36328C9.09639 8.36328 8.36377 9.09591 8.36377 9.99964C8.36377 10.9034 9.09639 11.636 10.0001 11.636Z" | |
| stroke="#FCFCFC" | |
| stroke-width="1.22727" | |
| stroke-linecap="round" | |
| stroke-linejoin="round" | |
| /> | |
| <!-- Right - big --> | |
| <path | |
| d="M16.5454 14.909C17.5763 13.5426 18.1818 11.8408 18.1818 9.99991C18.1818 8.159 17.5763 6.45718 16.5454 5.09082" | |
| stroke="#FCFCFC" | |
| stroke-width="1.22727" | |
| stroke-linecap="round" | |
| stroke-linejoin="round" | |
| class="pulse-animation-2" | |
| /> | |
| <!-- Left - big --> | |
| <path | |
| d="M3.45472 5.09082C2.42381 6.45718 1.81836 8.159 1.81836 9.99991C1.81836 11.8408 2.42381 13.5426 3.45472 14.909" | |
| stroke="#FCFCFC" | |
| stroke-width="1.22727" | |
| stroke-linecap="round" | |
| stroke-linejoin="round" | |
| class="pulse-animation-3" | |
| /> | |
| <!-- Right - med. --> | |
| <path | |
| d="M13.9272 12.9451C14.5409 12.1269 14.9091 11.1042 14.9091 9.99966C14.9091 8.89511 14.5409 7.87238 13.9272 7.0542" | |
| stroke="#FCFCFC" | |
| stroke-width="1.22727" | |
| stroke-linecap="round" | |
| stroke-linejoin="round" | |
| class="pulse-animation-4" | |
| /> | |
| <!-- Left - med. --> | |
| <path | |
| d="M6.07289 7.0542C5.45926 7.87238 5.09106 8.89511 5.09106 9.99966C5.09106 11.1042 5.45926 12.1269 6.07289 12.9451" | |
| stroke="#FCFCFC" | |
| stroke-width="1.22727" | |
| stroke-linecap="round" | |
| stroke-linejoin="round" | |
| class="pulse-animation-5" | |
| /> | |
| </svg> | |
| </div> | |
| <p id="countdown"></p> | |
| </div> | |
| </div> | |
| </body> | |
| <script> | |
| const countdownTime = document.getElementById("countdown"); | |
| let remainingSeconds = 3600; | |
| const formatTime = (milliseconds) => { | |
| const seconds = milliseconds / 1000; | |
| const hours = Math.floor(seconds / 3600); | |
| const minutes = Math.floor((seconds % 3600) / 60); | |
| const formattedSeconds = seconds % 60; | |
| return `${hours.toString().padStart(2, "0")}:${minutes | |
| .toString() | |
| .padStart(2, "0")}:${formattedSeconds.toString().padStart(2, "0")}`; | |
| }; | |
| setInterval(() => { | |
| if (remainingSeconds > 0) { | |
| remainingSeconds--; | |
| countdownTime.textContent = formatTime(remainingSeconds * 1000); | |
| } | |
| }, 1000); | |
| </script> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment