Loading animation & Own Styles

Cleshy · Dec 25, 2023 · b2af04e · b2af04e
1 parent e4045cb
commit b2af04e
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 13 deletions.
diff --git a/index.html b/index.html
@@ -13,7 +13,7 @@
     <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=Montserrat&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;800&display=swap"
       rel="stylesheet"
     />
     <!-- Fontawesome CSS -->
@@ -43,6 +43,8 @@
         <button class="btn btn-quote" id="new-quote">New Quote</button>
       </div>
     </div>
+    <!-- Loader -->
+    <div class="loader" id="loader"></div>
     <!-- Script -->
     <script src="script.js"></script>
   </body>

diff --git a/script.js b/script.js
@@ -1,16 +1,31 @@
 "use strict";
 
+const quoteContainer = document.querySelector("#quote-container");
 const quoteText = document.querySelector("#quote");
 const authorText = document.querySelector("#author");
 const twitterBtn = document.querySelector("#twitter");
 const newQuoteBtn = document.querySelector("#new-quote");
+const loader = document.querySelector("#loader");
 
 // Global variable for json response.
 let apiQuotes = [];
 let quote = "";
 
+// Show loading
+function quoteLoading() {
+  loader.hidden = false;
+  quoteContainer.hidden = true;
+}
+
+// Hide Loading
+function quoteLoaded() {
+  quoteContainer.hidden = false;
+  loader.hidden = true;
+}
+
 // Show new Quote
 function newQuote() {
+  quoteLoading();
   // Pick a random quote from apiQuotes array
   quote = apiQuotes[Math.floor(Math.random() * apiQuotes.length)];
   authorText.textContent = quote.author;
@@ -21,12 +36,14 @@ function newQuote() {
   } else {
     quoteText.classList.remove("long-quote");
   }
-
+  // Set Quote, Hide Loader
   quoteText.textContent = quote.text;
+  quoteLoaded();
 }
 
 // Get Quotes from API
 async function getQuotes() {
+  quoteLoading();
   const apiUrl = "https://jacintodesign.github.io/quotes-api/data/quotes.json";
   try {
     const response = await fetch(apiUrl);

diff --git a/style.css b/style.css
@@ -17,44 +17,54 @@ html {
 body {
   margin: 0;
   min-height: 100vh;
-  background-color: #ffffff;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23000000' fill-opacity='0.08'%3E%3Cpath d='M0 38.59l2.83-2.83 1.41 1.41L1.41 40H0v-1.41zM0 1.4l2.83 2.83 1.41-1.41L1.41 0H0v1.41zM38.59 40l-2.83-2.83 1.41-1.41L40 38.59V40h-1.41zM40 1.41l-2.83 2.83-1.41-1.41L38.59 0H40v1.41zM20 18.6l2.83-2.83 1.41 1.41L21.41 20l2.83 2.83-1.41 1.41L20 21.41l-2.83 2.83-1.41-1.41L18.59 20l-2.83-2.83 1.41-1.41L20 18.59z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+  background-color: #280000;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='199' viewBox='0 0 100 199'%3E%3Cg fill='%23fffff5' fill-opacity='0.4'%3E%3Cpath d='M0 199V0h1v1.99L100 199h-1.12L1 4.22V199H0zM100 2h-.12l-1-2H100v2z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
   color: var(--clr-font-dark);
-  font-family: "Montserrat", sans-serif;
+  font-family: "Playfair Display", serif;
   text-align: center;
   display: flex;
   justify-content: center;
+  font-weight: 500;
   align-items: center;
-  font-weight: 700;
   line-height: 1.5;
 }
 
 .quote-container {
   width: auto;
   max-width: 90rem;
-  padding: 2rem 3rem;
+  padding: 2.5rem 4rem;
   border-radius: 1rem;
-  background-color: rgba(255, 255, 255, 0.5);
+  background-color: rgba(255, 255, 255, 0.95);
   box-shadow: 0 0 1rem 0.1rem rgba(0, 0, 0, 0.2);
 }
 
 .quote-text {
   font-size: 2.75rem;
+  padding-bottom: 2rem;
 }
 
 .long-quote {
-  font-size: 2rem;
+  font-size: 2.3rem;
 }
 
 .fa-quote-left {
   font-size: 4rem;
 }
 
 .quote-author {
-  margin-top: 1.6rem;
+  margin-top: 1.3rem;
   font-size: 2.3rem;
-  font-weight: 400;
+  font-weight: 800;
+  letter-spacing: 2px;
   font-style: italic;
+  font-family: "Playfair Display", serif;
+  color: #160000;
+}
+
+.quote-author::before,
+.quote-author::after {
+  content: "\2014";
+  padding: 1rem;
 }
 
 .button-container {
@@ -69,14 +79,16 @@ body {
   border: none;
   border-radius: 10px;
   color: #fff;
-  background-color: #333;
+  background-color: #160000;
   outline: none;
   padding: 2rem;
-  box-shadow: 0 0.6rem rgba(121, 121, 121, 0.3);
+  box-shadow: 0 0.6rem 1rem rgba(22, 0, 0, 0.5);
   display: flex;
   justify-content: center;
   align-items: center;
   transition: all 0.2s ease;
+  font-family: inherit;
+  font-weight: 500;
 }
 
 .btn:hover {
@@ -100,6 +112,26 @@ body {
   font-size: 1.75rem;
 }
 
+/* Loader */
+
+.loader {
+  border: 16px solid #d2d2d2;
+  border-top: 16px solid #222;
+  border-radius: 100%;
+  width: 120px;
+  height: 120px;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
 /* Media Query: Tabler or Smaller */
 @media screen and (max-width: 1000px) {
   .quote-container {