How To Create Modern Loading Using JS

codinglabsolution

  Embark on a coding adventure! Follow our guide to build Modern Loading using HTML, CSS, and JavaScript. Unleash your creativity in web development.


How To Create Modern Loading Using JS







Modern loading using JavaScript involves employing asynchronous techniques such as Promises, async/await, or the fetch API to efficiently fetch resources like data, images, or scripts from servers without blocking the main execution thread, ensuring a smooth and responsive user experience.


Source Code

Step 1 (HTML Code):



1- `<div class="circle">`: This is a `<div>` element with the class attribute set to "circle". It likely represents a circular element, such as a progress circle or similar.


2- `<p class="count">`: Inside the `<div>` element, there's a `<p>` element with the class attribute set to "count". This `<p>` element likely contains the text content related to the count or percentage displayed within the circle.


3- `<span class="percent">50</span>`: Inside the `<p>` element, there's a `<span>` element with the class attribute set to "percent". This `<span>` element likely contains the actual numerical value (50 in this case) that is being displayed as a percentage.


4- `%`: This is just a simple text content that follows the `<span>` element, likely to represent the percentage symbol. It's inside the `<p>` element.


So, altogether, this HTML structure represents a circular element with a count or percentage displayed inside it. In this example, it's displaying "50%".

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Connect Four</title>

	<!-- Google Fonts -->
	<link rel="preconnect" href="https://fonts.gstatic.com">
	<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap" rel="stylesheet">

	<!-- CSS -->
	<link rel="stylesheet" href="styles.css">

</head>
<body>

	<div class="circle">
  <p class="count">
    <span class="percent">50</span>
    %
  </p>
</div>

	<script src="script.js"></script>

</body>
</html>

Step 2 (CSS Code):


Explanation:


1- The `body` rule sets the body's height to 100% of the viewport height, centers its content both horizontally and vertically, and sets the background color to dark gray (`#232323`) with white text color.

2- The `.circle` class styles the circular element with a gradient background, adds a box shadow to create a 3D effect, and applies a rotation animation (`spin`) to continuously rotate the circle.

3- The `.count` class creates a smaller inner circle for displaying the percentage text, sets its position to absolute, and applies an inset box shadow and a reverse rotation animation to create a contrasting effect.

4- The `.percent` class styles the percentage text with a large font size and a sans-serif font family.

body {
  height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  background: #232323;
  color: white;
}

.circle {
  width: 180px;
  height: 180px;
  background:
    conic-gradient(from 0deg at 50% 50%,
      #6f7bf7 0%,
      #9bf8f4 50%,
      #101012 50%);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100px;
  box-shadow:
    4px 4px 16px #000000bf,
    -4px -4px 16px #ffffff1a;
  animation: spin 1s infinite linear;
  position: relative;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.count {
  content: " ";
  width: 174px;
  height: 174px;
  background: #1d1e22;
  position: absolute;
  top: 3px;
  left: 3px;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100px;
  box-shadow:
    4px 4px 16px #000000bf inset,
    -4px -4px 16px #ffffff1a inset;
  animation: spin 1s infinite linear reverse;
}

.percent {
  font-family: sans-serif;
  font-size: 4em;
}

Step 3 (JavaScript Code):


1- `$percent` and `$circle`:

  - Define variables `$percent` and `$circle` to target HTML elements with the classes `.percent` and `.circle`, respectively.


2- `load`:

  - Define a variable `load` to track the loading percentage.


3- `update()`:

  - The `update()` function updates the `load` value and the displayed loading percentage inside the `.percent` element.

  - It increments the `load` value by either 0 or 1 using the expression `load += load < 100`.

  - Update the content of the `.percent` element to display the new value of `load`.

  - Update the background of the `.circle` element using `conic-gradient` to represent the new loading percentage.


4- `setInterval(update, 150)`:

  - It repeatedly executes the `update()` function every 150 milliseconds to continuously update the loading progress.

const $percent = document.querySelector('.percent');
const $circle = document.querySelector('.circle');
let load = 0;

function update() {
  load += load < 100;
  $percent.innerHTML = load;
  $circle.style.background =
    `conic-gradient(from 0deg at 50% 50%, #6f7bf7 0%, #9bf8f4 ${load}%, #101012 ${load}%)`;
}

setInterval(update, 150);

Source Code: Download Files

Final Output:



Conclusion:


In conclusion, creating a modern loading mechanism using JavaScript involves employing asynchronous techniques such as Promises, async/await, or the fetch API to efficiently fetch resources from servers without blocking the main execution thread. Additionally, styling techniques like CSS animations, transitions, and gradients can be used to enhance the visual appeal of the loading indicator. By combining these techniques, developers can create loading experiences that are both smooth and visually engaging, ensuring a positive user experience on modern web applications.

Tags: #JavaScript #WebDevelopment #LoadingAnimation #AsyncProgramming #FrontEndDevelopment #UserExperience #CSSAnimations #ProgressIndicators #FetchAPI #AsyncAwait

إرسال تعليق

ملفات تعريف الارتباط
نستخدم ملفات تعريف الارتباط (Cookies) لفهم كيفية استخدامك لموقعنا وتحسين تجربتك في المحتوى والإعلانات. باستمرارك في تصفح الموقع، فإنك توافق على استخدامنا لملفات تعريف الارتباط وفقًا لسياسة الخصوصية لدينا.
أُووبس!
يبدو أن هناك خطأ ما في اتصالك بالإنترنت. يرجى الاتصال بالإنترنت وبدء التصفح مرة أخرى.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.