Data refresh indicator

Data refresh indicator component shows the user when was the page contents updated and how long before it's updated again.

Refresh indicators act as intermediaries between different states of the page view, helping users to understand what is going on as the screen changes.

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 | moment.min.js | data-refresh.js

Functional grouping: Text and data

Demo

Configure: select the dropdowns below to display the variety of options that a data refresh indicator  supports.

Usage best practices

Select the date/time in the past for the demo.

Last updated: 15 minutes ago

Code


				
			

		
		
			
Responsive preview

			

				

					
				

			

		

		

	

    	




    
    
    



    
        

            

                
                    





    
    
    


Consider using duration block when:




    

  • user needs to know how long the information on a page was updated.




    






                
                    





    
    
    


Usage examples: 


To show when the page contents updated and how long before it's updated again : 


    

  • traffic report

  • Water main break 

  • travel time