How To Create Modern Loading Using JS

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

Join us on Telegram

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

الاستاذ محمد التميمي

How To Create Modern Loading Using JS

Step 1 (HTML Code):

Step 2 (CSS Code):

Step 3 (JavaScript Code):

Source Code: Download Files

Final Output:

Conclusion:

إرسال تعليق

حل أسئلة الأحياء الدور الأول 2024 صف الثالث المتوسط

حل اسئلة وسائط متعددة قسم الحاسوب الجامعة المستنصرية نموذج رقم 1

+10 best HTML CSS Number Input

الدوال(functions) في لغة ++C: حلول مبتكرة لأسئلة متنوعة

حل اسئلة ويب متقدم قسم الحاسوب الجامعة المستنصرية نموذج رقم 1

الأستاذ محمد التميمي