added loader-popup

2023-02-07 18:04:18 +05:00
parent 9f0de105d6
commit e7360919fe
15 changed files with 387 additions and 323 deletions
@@ -0,0 +1,142 @@
+.popup__content {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.popup__title {
+  font-style: normal;
+  font-weight: 400;
+  font-size: 22px;
+  line-height: 130%;
+  /* identical to box height, or 29px */
+  margin: 0;
+
+  /* App/White */
+
+  color: #ffffff;
+}
+
+.logo__popup {
+  height: auto;
+  width: 100%;
+  margin-bottom: 48px;
+  object-fit: cover;
+}
+
+.logo__popup_ex {
+  display: none;
+}
+
+.popup__input {
+  padding: 5px 0px;
+  border-radius: 12px;
+  background: #404040;
+  height: 76px;
+  font-style: normal;
+  font-weight: 300;
+  font-size: 38px;
+  line-height: 46px;
+  /* identical to box height */
+  text-align: center;
+
+  letter-spacing: 0.3em;
+
+  /* App/White */
+  box-sizing: border-box;
+  border: none;
+  outline: none;
+  color: #ffffff;
+}
+
+@media screen and (max-width: 639px) {
+  .logo__popup {
+    margin-bottom: 40px;
+  }
+
+  .logo__popup_ex {
+    display: block;
+    height: auto;
+    width: 100%;
+    margin-bottom: 24px;
+    object-fit: cover;
+  }
+
+  .popup__input {
+    height: 48px;
+    font-size: 30px;
+  }
+
+  .popup__title {
+    font-size: 16px;
+    width: 78%;
+  }
+
+  .popup__content {
+    gap: 16px;
+  }
+}
+
+.loader-container {
+  width: 494px;
+  box-sizing: border-box;
+  background-color: #262626;
+  border: 1px solid #404040;
+  border-radius: 32px;
+  padding: 45px 0 51px 0;
+  display: flex;
+  flex-direction: column;
+  gap: 51px;
+  align-items: center;
+}
+
+.loading-caption {
+  font-style: normal;
+  font-weight: 400;
+  font-size: 22px;
+  line-height: 130%;
+  /* identical to box height, or 29px */
+
+  text-align: center;
+
+  /* Landing/White */
+
+  color: #ebebeb;
+}
+
+.loader {
+  width: 106px;
+  height: 106px;
+  border-radius: 50%;
+  display: inline-block;
+  position: relative;
+  background: conic-gradient(
+    from 135deg at 50% 50%,
+    rgba(255, 255, 255, 0) -6.26deg,
+    #ffffff 314.83deg,
+    rgba(255, 255, 255, 0) 353.74deg,
+    #ffffff 674.83deg
+  );
+  box-sizing: border-box;
+  animation: rotation 1s linear infinite;
+}
+.loader::after {
+  content: "";
+  box-sizing: border-box;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  background: #262626;
+}
+@keyframes rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}