Switching from Bootstrap's traditional "loading" style progress bar to a more minimal dot style progress bar

Question

Switching from Bootstrap's traditional "loading" style progress bar to a more minimal dot style progress bar

Currently, I am implementing a survey progress bar using Bootstrap's "loading" style. Here is the code for the progress bar:

<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>

However, I want to modify the progress bar to display as dots instead of a solid bar. Each step in the survey should be represented by a dot similar to this image:

https://i.sstatic.net/QmYQh.png

I have searched the Bootstrap documentation and tried various CSS styles, but I haven't found a simple way to achieve the dot style. Can someone provide guidance on how to change the progress bar to show dots rather than a solid bar? Any assistance or code examples would be greatly appreciated.

html css bootstrap-4 frontend bootstrap-5

Answer 1

Answer №1

I developed this code from the ground up. If you have any queries, don't hesitate to ask.

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);
    }
})

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

<div class="progress"></div>
<button class="previous">Previous</button>
<button class="next">Next</button>

Answer 2

I developed this code from the ground up. If you have any queries, don't hesitate to ask.

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);
    }
})

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

<div class="progress"></div>
<button class="previous">Previous</button>
<button class="next">Next</button>

Switching from Bootstrap's traditional "loading" style progress bar to a more minimal dot style progress bar

Answer №1

Similar questions

What is the best way to style a tooltip in an ASP.NET application using CSS?

What is a way to create a colored <hr> element without increasing its height at all?

Adjust CSS to properly position links alongside details summary

Generate a table framework by dynamically adjusting the number of rows and columns

Ways to incorporate onload animation into a Pie chart with billboard js

Updating the src of an iframe and adding an onclick event to a link using JavaScript

Actions for HTML form submission to API through proxy link

``Advanced Web Development: Dealing with HTML5, CSS3, and

"Can we have selection options or drop-down menus that are in line with today

IFrame displaying blank page instead of report

JavaScript/DOM - What sets apart a "CSS Selector" from an attribute?

Simple Mobile-Friendly Tabs - mobile tabs are always visible

Is there a problem with addEventListener returning false?

The execution of jQuery was hindered due to the implementation of PHP include

Microsoft Edge and Google Fonts display strong and distinctive lettering

Troubleshooting Ajax contact form's failure to refresh (PHP and Bootstrap 4)

My goal is to design a dynamic textbox for a website that allows users to customize the text in any format they desire

Replicating DIV element with input field

What could be causing my page width to only expand to 100% when using "fit-content"?

The Tailwind Typography plugin simply maintains the default font size of heading tags without altering their style