CSS에서 진행률 표시줄을 구현하는 방법-프런트엔드 Q&A-php.cn

CSS에서 진행률 표시줄을 구현하는 방법

PHPz

풀어 주다： 2023-04-23 16:55:31

원래의

4342명이 탐색했습니다.

CSS 진행률 표시줄 구현

진행률 표시줄은 일반적인 구성 요소로 다양한 웹사이트 및 애플리케이션에 자주 등장합니다. 예를 들어 다운로드 진행률, 업로드 진행률, 웹페이지 로딩 진행률 등이 있습니다. CSS를 사용하여 진행률 표시줄을 구현하는 것은 매우 간단합니다. 이 기사에서는 독자에게 진행률 표시줄을 구현하는 방법을 자세히 소개합니다.

HTML 구조

간단한 진행률 표시줄을 구현하려면 먼저 HTML 구조를 정의해야 합니다. 다음은 가장 기본적인 HTML 구조입니다.

<div class="progress">
  <div class="progress-bar"></div>
</div>

로그인 후 복사

그 중 progress는 진행률 표시줄을 나타내는 컨테이너이고, progress-bar는 진행률 표시줄 자체를 나타냅니다. 물론 progress에 진행 텍스트 등 더 많은 요소를 추가할 수도 있습니다. progress是表示进度条的容器，progress-bar是表示进度条本身。当然，我们也可以在progress中添加更多的元素，比如进度文字等等。

CSS样式

接下来，我们需要添加CSS样式来实现进度条。

首先，需要给progress容器设置宽度和高度，并在CSS属性中设置position: relative和overflow: hidden。这样可以保证进度条在容器中显示，并可以隐蔽容器外的内容，同时将进度条容器的定位设置为相对定位。

.progress {
  width: 100%;
  height: 20px;
  position: relative;
  overflow: hidden;
}

로그인 후 복사

然后，为progress-bar设置绝对定位，并将左边距设置为0。同时，将进度条的宽度设置为0，这样在一开始进度条将不会显示。

.progress-bar {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 100%;
  background-color: #007bff;
  transition: width 0.8s ease;
}

로그인 후 복사

代码解释：

left: 0 表示将进度条放置在容器的最左边。
top: 0 表示将进度条放置在容器的最上面。
width: 0 表示进度条的初始宽度为0，所以一开始不会显示。
height: 100% 表示将进度条的高度设置为和容器一样高。
background-color: #007bff 是设置进度条的颜色。
transition: width 0.8s ease 表示使用CSS过渡动画，将进度条宽度缓慢增加到目标值。

最后，我们可以使用JavaScript或者CSS动画来控制进度条的宽度，从而实现进度的显示。以下是使用JavaScript的示例：

const progressBar = document.querySelector('.progress-bar');
let percentage = 0;

function progress() {
  if (percentage < 100) {
    percentage++;
    progressBar.style.width = percentage + '%';
  } else {
    clearInterval(intervalId);
  }
}

const intervalId = setInterval(progress, 20);

로그인 후 복사

此示例将进度条的宽度从0%逐渐增加到100%，并在100%处停止。我们也可以根据实际情况来定义进度条的宽度和增加的速度。

如果不想使用JavaScript，我们也可以使用CSS动画来实现进度条的效果。以下是一个简单的CSS动画示例：

.progress-bar {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 100%;
  background-color: #007bff;
  animation: progress 5s ease-in-out;
}

@keyframes progress {
  0% {
    width: 0;
  }
  50% {
    width: 50%;
  }
  100% {
    width: 100%;
  }
}

로그인 후 복사

此示例将进度条的宽度从0%逐渐增加到100%，并在一定时间内完成。在其中，animation属性定义了动画的名称，时间以及缓动方式。@keyframes

CSS 스타일

다음으로 진행률 표시줄을 구현하기 위해 CSS 스타일을 추가해야 합니다.

먼저 progress 컨테이너의 너비와 높이를 설정하고 CSS에서 position:relative 및 overflow:hidden을 설정해야 합니다. 속성. 이렇게 하면 진행률 표시줄이 컨테이너에 표시되고 컨테이너 외부의 콘텐츠가 숨겨지는 동시에 진행률 표시줄 컨테이너의 위치가 상대 위치로 설정됩니다. 🎜rrreee🎜그런 다음 진행률 표시줄의 절대 위치를 설정하고 왼쪽 여백을 0으로 설정하세요. 동시에 진행률 표시줄의 너비를 0으로 설정하여 처음에는 진행률 표시줄이 표시되지 않도록 합니다. 🎜rrreee🎜코드 설명: 🎜

left: 0은 진행률 표시줄을 컨테이너의 가장 왼쪽에 배치하는 것을 의미합니다.
top: 0은 진행률 표시줄을 컨테이너 상단에 배치한다는 의미입니다.
width: 0은 진행률 표시줄의 초기 너비가 0이므로 처음에는 표시되지 않음을 의미합니다.
height: 100%는 진행률 표시줄의 높이를 컨테이너와 동일한 높이로 설정한다는 의미입니다.
ground-color: #007bff는 진행률 표시줄의 색상을 설정하는 것입니다.
transition: width 0.8seasing은 CSS 전환 애니메이션을 사용하여 진행률 표시줄의 너비를 대상 값으로 천천히 늘리는 것을 의미합니다.

🎜마지막으로 JavaScript 또는 CSS 애니메이션을 사용하여 진행률 표시줄의 너비를 제어하여 진행률을 표시할 수 있습니다. 다음은 JavaScript를 사용한 예입니다. 🎜rrreee🎜 이 예는 진행률 표시줄의 너비를 0%에서 100%까지 점진적으로 늘려 100%에서 멈춥니다. 실제 상황에 따라 진행률 표시줄의 너비와 증가 속도를 정의할 수도 있습니다. 🎜🎜JavaScript를 사용하고 싶지 않다면 CSS 애니메이션을 사용하여 진행률 표시줄 효과를 얻을 수도 있습니다. 다음은 간단한 CSS 애니메이션 예입니다. 🎜rrreee🎜 이 예는 진행률 표시줄의 너비를 0%에서 100%까지 점차적으로 늘려 특정 시간 내에 완료합니다. 그 중 animation 속성은 애니메이션의 이름, 시간, 여유 방법을 정의합니다. @keyframes는 진행률 표시줄 애니메이션을 0%에서 100%까지 정의하는 키 프레임을 나타냅니다. 🎜🎜요약🎜🎜위는 CSS를 이용하여 진행바를 구현하는 방법입니다. HTML 구조와 CSS 스타일의 결합을 통해 기본적인 진행바를 쉽게 완성할 수 있습니다. 구현 측면에서 JavaScript 또는 CSS 애니메이션을 사용하여 진행률 표시줄의 너비를 제어하여 진행률을 표시할 수 있습니다. 다양한 프로젝트에서 더 나은 결과를 얻으려면 진행률 표시줄의 스타일과 표시 방법을 실제 상황에 따라 정의해야 합니다. 🎜

위 내용은 CSS에서 진행률 표시줄을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!