집 > 기사 > 웹 프론트엔드 > HTML, CSS 및 jQuery: 애니메이션 로딩 진행률 표시줄 만들기

HTML, CSS 및 jQuery: 애니메이션 로딩 진행률 표시줄 만들기

王林원래의: 2023-10-27 10:00:521514검색

HTML, CSS 및 jQuery: 애니메이션 효과로 로딩 진행률 표시줄 만들기

로딩 진행률 표시줄은 일반적인 웹페이지 로딩 효과로, 사용자가 현재 페이지 로딩 진행률을 명확하게 볼 수 있어 사용자 경험이 향상됩니다. 이 기사에서는 HTML, CSS 및 jQuery를 사용하여 애니메이션 효과가 포함된 로딩 진행률 표시줄을 만들고 구체적인 코드 예제를 제공합니다.

HTML 구조

먼저 HTML의 기본 구조를 만들어 보겠습니다. 진행률 표시줄을 포함하는 컨테이너 요소가 필요하고 그 안에 진행률을 표시하는 요소를 추가해야 합니다.

<!DOCTYPE html>
<html>
<head>
  <title>加载进度条</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="progress-container">
    <div class="progress-bar"></div>
  </div>

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

CSS Style

다음으로 진행률 표시줄을 아름답게 하기 위해 CSS 스타일 시트를 만들어야 합니다. 진행률 표시줄에 애니메이션 효과를 생성하기 위해 의사 요소를 사용하겠습니다.

body {
  background-color: #f1f1f1;
}

.progress-container {
  width: 100%;
  background-color: #ddd;
}

.progress-bar {
  width: 0%;
  height: 20px;
  background-color: #4CAF50;
  animation: progress-animation 2s linear;
}

/* 创建进度条动画 */
@keyframes progress-animation {
  0% { width: 0%; }
  100% { width: 100%; }
}

jQuery code

마지막으로 jQuery를 사용하여 진행률 표시줄의 로딩 효과를 제어해야 합니다. 지정된 시간 내에 진행률 표시줄의 너비를 변경하려면 animate() 메서드를 사용하겠습니다. animate()方法来在规定的时间内改变进度条的宽度。

$(document).ready(function(){
  // 定义进度条的目标宽度（根据需要自行修改）
  var targetWidth = 80;

  // 获取进度条元素
  var progressBar = $(".progress-bar");

  // 使用animate()方法来改变进度条的宽度
  progressBar.animate({
    width: targetWidth + "%"
  }, 2000);
});

在上面的代码中，我们在页面加载完成后，使用animate()方法来将进度条的宽度从0%逐渐增长到指定的目标宽度（此处为80%），过程持续2秒。

将上述代码保存为script.js文件，并将CSS样式保存为style.cssrrreee

위 코드에서는 animate() 메서드를 사용하여 페이지가 로드된 후 진행률 표시줄의 너비를 0%에서 지정된 대상 너비(여기서는 80%)까지 점진적으로 늘립니다. . ), 프로세스는 2초 동안 지속됩니다.

위 코드를 script.js 파일로 저장하고, CSS 스타일을 style.css 파일로 저장하여 HTML 파일과 같은 디렉토리에 저장하세요.

이제 HTML 파일을 열고 브라우저에서 페이지를 미리 보면 애니메이션이 포함된 로딩 진행률 표시줄이 표시됩니다. 🎜🎜요약하자면 HTML, CSS 및 jQuery를 사용하여 애니메이션 효과가 포함된 로딩 진행률 표시줄을 성공적으로 만들었습니다. 이러한 기본 지식을 습득함으로써 웹 페이지에서 더욱 풍부한 상호 작용 효과를 얻고 사용자 경험을 향상시킬 수 있습니다. 이 기사가 도움이 되기를 바랍니다! 🎜

위 내용은 HTML, CSS 및 jQuery: 애니메이션 로딩 진행률 표시줄 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

jquery css html JS 样式表伪元素

성명：

이전 기사：Layui를 사용하여 드래그 앤 드롭을 지원하는 텍스트 편집기를 개발하는 방법다음 기사：Layui를 사용하여 드래그 앤 드롭을 지원하는 텍스트 편집기를 개발하는 방법