CSS <time> Data Type

Description

The <time> CSS data type sets the time in seconds or milliseconds. The value consists of an integer or fractional <number>, immediately followed by an s for seconds or an ms for milliseconds. A space after the number is not allowed. To convert units, remember that 1s = 1000ms.

Syntax

property: <time>; 

Values

  • sRepresents a time in seconds.
  • msRepresents a time in milliseconds

Example

<div class="loading"> 
<div class="spin"></div>
<p>Loading...</p>
</div>
.loading { 
   width: 240px; 
   margin: auto; 
   padding: 20px 0 10px; 
   background: #333; 
   color: #fff; 
   text-align: center; 
} 
.spin {
   display: inline-block; 
   width: 30px; 
   height: 30px; 
   border: 10px solid #ccc; 
   border-right: 10px solid transparent; 
   border-radius: 30px; 
   animation: spin 2s linear 0s infinite normal; 
}
@keyframes spin { 
   from { 
      transform: rotate(0deg); 
   } 
   to { 
   transform: rotate(360deg); 
   } 
}

Browser Support

Desktop
Explorer Edge Chrome Firefox Opera Safari
9121410.13.1
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
218410.121.0

Last updated by CSSPortal on: 8th December 2019