Counter indicator

The Counter indicator  for milestones

The Counter indicator timer displays key statistics for a specific event or important milestone of a project. Its gentle animation effectively draws attention to ongoing progress, capturing users' attention subtly and making the information more engaging and memorable.

What this component should be used for?

The Counter Indicator Timer is ideal for showcasing essential statistics and progress metrics. It helps highlight meaningful data points in various contexts, such as:

  • Displaying how many rides were taken in a year on public transportation.
  • Showing how many people used public transit in a given period.
  • Indicating the duration from conception to implementation of a major infrastructure project.
  • Presenting customer engagement statistics.

Component data

Release notes

Global resources:
cicon-package.zip | bootstrap-grid.css (4.4.1) | jquery-3.6.0.min.js

Component resources:
SCSS files

Functional grouping: Marketing and storytelling

Demo

Neque porro quisquam 200

Eyebrow header (Optional)

20% Increase

Neque porro quisquam est qui dolorem ipsum quia

Code


				
			

		
		
			
Responsive preview

			

				

					
				

			

		

		

	

    	




    
    
    



    
        

            

                
                    





    
    
    





    
        
            
Do
                
                
            

        
        
    
    
    
    




    
    


  • Highlight Relevant Data: use the timer to showcase statistics that are meaningful and relevant to users.
  • Ensure Readability: follow design system guidelines for font sizes and colors to maintain good contrast and visibility.
  • Maintain Visual Consistency: Ensure the timer’s design matches the overall aesthetic of the website.
  • Update Regularly: Keep the displayed information up-to-date and accurate. The frequency of updates should depend on how often the information changes significantly.
  • Ensure Responsiveness: Make sure the timer functions well across all devices, including desktops, tablets, and smartphones. 



    



    









                
                    





    
    
    





    
    
        
            
Don't
                
                
            

        
        
    
    
    




    
    


  • Avoid Overuse: Don’t overload your interface with more than 3 timers per page, which can overwhelm users.
  • Don’t have a cluttered Display: Don’t include unnecessary details that can clutter the display and confuse users.
  • Don’t have inconsistent Formatting: Avoid using different time formats within the same timer, which can lead to confusion.
  • Don’t ignore Accessibility: Don’t overlook accessibility features and ensure all users can interact with and understand the timer.