Page Indicator

The Page Indicator component is used to display a series of pages or steps, where one can be marked as active. It supports different sizes and styles to accommodate various layouts.

Examples #

Here are different examples of Page Indicators with varying sizes and active states.

    

        
        

            
            
            
            
            
            
            
            
            
            
        
        

            
            
            
            
            
            
            
            
            
            
        
        

            
            
            
            
            
            
            
            
            
            
        
        

            
            
            
            
            
            
            
            
            
            
        
    
    

        
        
HTML
        
    
    <div class="page-indicator gap-1" style="--size:20">
    <div class="page"></div>
    <div class="page"></div>
    <div class="page active"></div>
    <div class="page"></div>
    <div class="page"></div>
</div>
<div class="page-indicator gap-1" style="--size:30">
    <div class="page">1</div>
    <div class="page">2</div>
    <div class="page active">3</div>
    <div class="page">4</div>
    <div class="page">5</div>
</div>
<div class="page-indicator gap-1" style="--size:40">
    <div class="page">1</div>
    <div class="page">2</div>
    <div class="page active">3</div>
    <div class="page">4</div>
    <div class="page">5</div>
</div>
<div class="page-indicator gap-1" style="--size:50">
    <div class="page">1</div>
    <div class="page">2</div>
    <div class="page active">3</div>
    <div class="page">4</div>
    <div class="page">5</div>
</div>

Options #

The Page Indicator supports the following options for customization: