new

components/dot/DotAnimatsiya.tsx

@@ -0,0 +1,13 @@
+import "./dot.css";
+export default function DotAnimatsiya() {
+  return (
+    <div className="pulse-wrapper">
+      <div className="core"></div>
+
+      <span className="ring"></span>
+      <span className="ring"></span>
+      <span className="ring"></span>
+      <span className="ring"></span>
+    </div>
+  );
+}

components/dot/dot.css

@@ -0,0 +1,55 @@
+.pulse-wrapper {
+  position: relative;
+  width: 40px;
+  height: 40px;
+}
+
+.core {
+  position: absolute;
+  inset: 0;
+  margin: auto;
+  width: 14px;
+  height: 14px;
+  background: #dc2626; /* red-600 */
+  border-radius: 50%;
+  z-index: 2;
+}
+
+.ring {
+  position: absolute;
+  inset: 0;
+  margin: auto;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: #dc2626;
+  border: #dc2626;
+  outline: #dc2626;
+  color: #dc2626;
+  animation: ripple 3s ease-out infinite;
+}
+
+/* har bir ring kechikib chiqadi */
+.ring:nth-child(2) {
+  animation-delay: 0.5s;
+}
+.ring:nth-child(3) {
+  animation-delay: 1s;
+}
+.ring:nth-child(4) {
+  animation-delay: 1.5s;
+}
+.ring:nth-child(5) {
+  animation-delay: 1.5s;
+}
+
+@keyframes ripple {
+  0% {
+    transform: scale(1);
+    opacity: 0.6;
+  }
+  100% {
+    transform: scale(3);
+    opacity: 0;
+  }
+}