Page Indicator

The Page Indicator component visually represents a series of pages or steps, highlighting the current active page. It is ideal for carousels, multi-step forms, or any scenario where users need to track their position within a sequence.

Description #

The Page Indicator component provides a simple and customizable way to show progress or navigation through multiple pages or steps. It supports two main display modes:

• Dot Mode: Displays empty circles (dots) for each page, with the active page highlighted. Best for minimal, icon-only indicators.

• Numbered Mode: Displays numbers inside each page indicator, with the active page highlighted. Useful for step-by-step processes or when page numbers are important.

Examples and Classes #

Dot Mode (20px)

            

                

                    

                    

                    

                    

                    

                
            
            

                
                
HTML
                
            
            <div class="page-indicator gap-1" style="--size:20px">
    <div class="page"></div>
    <div class="page"></div>
    <div class="page active"></div>
    <div class="page"></div>
    <div class="page"></div>
</div>

Numbered Mode (30px)

            

                

                    
1
                    
2
                    
3
                    
4
                    
5
                
            
            

                
                
HTML
                
            
            <div class="page-indicator gap-1" style="--size:30px">
    <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>

Numbered Mode (40px)

            

                

                    
1
                    
2
                    
3
                    
4
                    
5
                
            
            

                
                
HTML
                
            
            <div class="page-indicator gap-1" style="--size:40px">
    <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>

Dot Mode (50px)

            

                

                    

                    

                    

                    

                    

                
            
            

                
                
HTML
                
            
            <div class="page-indicator gap-1" style="--size:50px">
    <div class="page"></div>
    <div class="page"></div>
    <div class="page active"></div>
    <div class="page"></div>
    <div class="page"></div>
</div>

Available Classes

Class	Description
.page-indicator	Main wrapper for the page indicators. Controls the layout and spacing of the pages.
.page	Individual page indicator. Can be empty (dot mode) or contain a number (numbered mode).
.active	Applied to the currently active page indicator. Highlights the selected page.

Custom Properties

Property	Description
--size	Sets the width and height of each page indicator (dot or number). A unit (such as px, rem, etc.) is required; percentage (%) values are not supported. For example, --size:50px; makes each indicator 50px by 50px.

Layout Variations

The Page Indicator component supports different layout variations:

• Dot Mode: Minimal, empty circles for each page
• Numbered Mode: Numbered pages for step-by-step navigation
• Custom Size: Use the --size CSS variable to adjust the indicator size
• Active State: Highlight the current page with the active class

File Locations #

File	Path	Description
index.html	miz/themes/mizoon/components/page-indicator/index.html	Example implementation and documentation
_index.scss	miz/themes/mizoon/components/page-indicator/_index.scss	SCSS styles and variables
script.js	miz/themes/mizoon/components/page-indicator/script.js	JavaScript functionality

SCSS Variables #

            

                
                
SCSS
                
            
            $page-indicator-empty-custom-classes: ".bg-primary-color, .aspect-ratio-1x1, .radius-all-full";
$page-indicator-not-empty-custom-classes: ".bg-primary-color, .aspect-ratio-1x1, .radius-all-full, .bw-3, .border-style-solid, .border-primary-color, .on-primary-color, .bg-primary-color";
$page-indicator-active-empty-custom-classes: ".bg-secondary-color, .aspect-ratio-2x1";
$page-indicator-active-not-empty-custom-classes: ".bg-secondary-color";
$page-indicator-transition: .3s;
$page-indicator-pages-custom-classes: ".d-flex, .flex-row, .justify-content-center, .align-items-center";

JavaScript Implementation #

Class Structure

Method/Property	Type	Description
indicators	Property	NodeList of all page-indicator elements
constructor(selector)	Method	Initializes the Page Indicator component and sets up event listeners
init()	Method	Sets up indicators and their pages
setupIndicator(indicator)	Method	Initializes each indicator and its pages
setupPageClick(page, allPages)	Method	Sets up click event for each page
activatePage(selectedPage, allPages)	Method	Activates the selected page and deactivates others

Implementation Example

            

                
                
JavaScript
                
            
            class PageIndicator {
    constructor(selector) {
        this.indicators = document.querySelectorAll(selector);
        this.init();
    }

    init() {
        this.indicators.forEach(indicator => {
            this.setupIndicator(indicator);
        });
    }

    setupIndicator(indicator) {
        const pages = indicator.querySelectorAll('.page');
        pages.forEach(page => {
            this.setupPageClick(page, pages);
        });
    }

    setupPageClick(page, allPages) {
        page.addEventListener('click', () => {
            this.activatePage(page, allPages);
        });
    }

    activatePage(selectedPage, allPages) {
        allPages.forEach(page => page.classList.remove('active'));
        selectedPage.classList.add('active');
    }
}

document.addEventListener('DOMContentLoaded', () => {
    new PageIndicator('.page-indicator');
});