将Bootstrap的“loading”样式进度条更改为点样式进度条。

huangapple go评论81阅读模式
英文:

Changing Bootstrap 'loading' style progress bar to dot style progress bar

问题

我目前正在使用Bootstrap的“loading”样式进度条来表示调查的进度。进度条的代码如下:

<div class="progress" style="height: 20px;">
  <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

但是,我想将进度条的样式更改为点样式,其中调查的每个步骤都由一个点表示。例如:

将Bootstrap的“loading”样式进度条更改为点样式进度条。

我已经查阅了Bootstrap文档并尝试了不同的CSS样式,但我无法找到一种直接的方法来实现点样式。是否有人可以指导我如何修改进度条以显示为点而不是实心条?非常感谢任何帮助或代码示例。

英文:

I am currently using a Bootstrap "loading" style progress bar to indicate the progress of a survey. The progress bar code looks like this:

&lt;div class=&quot;progress&quot; style=&quot;height: 20px;&quot;&gt;
  &lt;div class=&quot;progress-bar&quot; role=&quot;progressbar&quot; style=&quot;width: 25%;&quot; aria-valuenow=&quot;25&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot;&gt;&lt;/div&gt;
&lt;/div&gt;

However, I would like to change the style of the progress bar to a dot style, where each step of the survey is represented by a dot. For example:

将Bootstrap的“loading”样式进度条更改为点样式进度条。

I have searched through Bootstrap documentation and tried different CSS styles, but I couldn't find a straightforward way to achieve the dot style. Can someone please guide me on how to modify the progress bar to display as dots rather than a solid bar? Any help or code examples would be greatly appreciated.

答案1

得分: 2

我从头开始创建了它。如果您有任何问题,请随时提问。

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->
const previous = document.querySelector('.previous');
const next = document.querySelector('.next');
const progress = document.querySelector('.progress');

let counter = 0;

next.addEventListener('click', function(){
    if(counter <= 35){
        progress.innerHTML += "⚫";
        counter++;
    }
})

previous.addEventListener('click', function(){
    if(counter > 0){
        const textNode = progress.firstChild;
        textNode.data = textNode.data.slice(0, -1);
    }
})

<!-- language: lang-css -->
.progress{
    height: 25px;
    border: 1px solid blue;
    width: 100%;
    margin-bottom: 10px;
}

<!-- language: lang-html -->
<div class="progress"></div>
<button class="previous">Previous</button>
<button class="next">Next</button>

<!-- end snippet -->
英文:

I created it from scratch. If you have any question feel free to ask.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const previous = document.querySelector(&#39;.previous&#39;);
const next = document.querySelector(&#39;.next&#39;);
const progress = document.querySelector(&#39;.progress&#39;);

let counter = 0;

next.addEventListener(&#39;click&#39;, function(){
    if(counter &lt;= 35){
        progress.innerHTML += &quot;⚫&quot;;
        counter++;
    }
})

previous.addEventListener(&#39;click&#39;, function(){
    if(counter &gt; 0){
        const textNode = progress.firstChild;
        textNode.data = textNode.data.slice(0, -1);
    }
})

<!-- language: lang-css -->

.progress{
    height: 25px;
    border: 1px solid blue;
    width: 100%;
    margin-bottom: 10px;
}

<!-- language: lang-html -->

&lt;div class=&quot;progress&quot;&gt;&lt;/div&gt;
&lt;button class=&quot;previous&quot;&gt;Previous&lt;/button&gt;
&lt;button class=&quot;next&quot;&gt;Next&lt;/button&gt;

<!-- end snippet -->

答案2

得分: 1

要创建一个点样式的进度条,您可以利用Bootstrap的flexbox功能,在容器内创建一系列的点。每个点代表调查中的一步,您可以动态更新点的类以显示进度。尝试以下代码。

<div class="container mt-5">
  <div class="progress-dot-container">
    <div class="progress-dot"></div>
    <div class="progress-dot"></div>
    <div class="progress-dot"></div>
    <!-- 为调查中的每一步添加更多进度点 -->
  </div>

  <button id="nextButton">Next</button>
</div>
.progress-dot-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 200px; /* 根据您的喜好调整宽度 */
  height: 20px; /* 根据您的喜好调整高度 */
  background-color: #f1f1f1; /* 根据需要调整背景颜色 */
  border-radius: 10px; /* 使容器呈圆角形状 */
}

.progress-dot {
  width: 10px; /* 根据您的喜好调整点的大小 */
  height: 10px; /* 根据您的喜好调整点的大小 */
  border-radius: 50%;
  background-color: #007bff; /* 根据您的喜好调整点的颜色 */
}

/* 添加一个类来突出显示进度 */
.progress-dot.active {
  background-color: #00ff00; /* 更改颜色以表示活动进度 */
}
let currentStep = 0; // 我们从0开始,因为这是第一步

function updateProgressDots() {
  const progressDots = document.querySelectorAll('.progress-dot');
  for (let i = 0; i < progressDots.length; i++) {
    if (i < currentStep) {
      progressDots[i].classList.add('active');
    } else {
      progressDots[i].classList.remove('active');
    }
  }
}

function moveToNextStep() {
  currentStep++;
  // 确保currentStep不超过进度点的数量
  const progressDots = document.querySelectorAll('.progress-dot');
  currentStep = Math.min(currentStep, progressDots.length);
  updateProgressDots();
}

// 添加事件监听器到“下一步”按钮
const nextButton = document.getElementById('nextButton');
nextButton.addEventListener('click', moveToNextStep);

请注意,以上代码示例中的HTML、CSS和JavaScript部分是为了创建点样式的进度条而提供的示例代码。您可以根据需要调整样式和功能。

英文:

To create a dot style progress bar, you can make use of Bootstrap's flexbox and create a series of dots within a container. Each dot represents a step in the survey, and you can update the class of the dots dynamically to show the progress.
Try this code.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

let currentStep = 0; // We start from 0 because it&#39;s the first step

function updateProgressDots() {
  const progressDots = document.querySelectorAll(&#39;.progress-dot&#39;);
  for (let i = 0; i &lt; progressDots.length; i++) {
    if (i &lt; currentStep) {
      progressDots[i].classList.add(&#39;active&#39;);
    } else {
      progressDots[i].classList.remove(&#39;active&#39;);
    }
  }
}

function moveToNextStep() {
  currentStep++;
  // Ensure currentStep doesn&#39;t exceed the number of progress dots
  const progressDots = document.querySelectorAll(&#39;.progress-dot&#39;);
  currentStep = Math.min(currentStep, progressDots.length);
  updateProgressDots();
}

// Add event listener to the &quot;Next&quot; button
const nextButton = document.getElementById(&#39;nextButton&#39;);
nextButton.addEventListener(&#39;click&#39;, moveToNextStep);

<!-- language: lang-css -->

.progress-dot-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 200px; /* Adjust the width as per your preference */
  height: 20px; /* Adjust the height as per your preference */
  background-color: #f1f1f1; /* Adjust the background color if needed */
  border-radius: 10px; /* To make the container rounded */
}

.progress-dot {
  width: 10px; /* Adjust the dot size as per your preference */
  height: 10px; /* Adjust the dot size as per your preference */
  border-radius: 50%;
  background-color: #007bff; /* Adjust the dot color as per your preference */
}

/* Add a class to highlight the progress */
.progress-dot.active {
  background-color: #00ff00; /* Change the color to indicate active progress */
}

<!-- language: lang-html -->

  &lt;div class=&quot;container mt-5&quot;&gt;
    &lt;div class=&quot;progress-dot-container&quot;&gt;
      &lt;div class=&quot;progress-dot&quot;&gt;&lt;/div&gt;
      &lt;div class=&quot;progress-dot&quot;&gt;&lt;/div&gt;
      &lt;div class=&quot;progress-dot&quot;&gt;&lt;/div&gt;
      &lt;!-- Add more progress dots for each step in your survey --&gt;
    &lt;/div&gt;

    &lt;button id=&quot;nextButton&quot;&quot;&gt;Next&lt;/button&gt;
  &lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年8月4日 02:56:35
  • 转载请务必保留本文链接:https://go.coder-hub.com/76830931.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定