Skip to content
Related Articles

Related Articles

Improve Article
Google AMP amp-date-countdown
  • Last Updated : 16 Oct, 2020

The amp-data-countdown is used to count down to a specific date which is rendered to the AMP HTML page. It is specifically used as a timer or count-down.

Required Scripts: Adding the amp-data-countdown component.

HTML




<script async custom-element="amp-date-countdown" src=
</script>

Adding the amp-mustache component



HTML




<script async custom-template="amp-mustache" src=
</script>

Attributes:

  1. end-date: It is ISO formatted date to count down to.
  2. timeleft-ms: Millisecond value to count down to.
  3. offset-seconds: A number to be added to the end date. It could be positive or negative.
  4. biggest unit: This attribute could be set as days, hours, minutes, seconds (default : days). The unit bigger than the user defined unit is not shown. Eg if there are 2 days left and biggest unit is hours, it shows 48 hours left.
  5. locale: Sets the language for the timer display.
                               English                                                            en                                 
                              German                              de
                              Spanish                              es
                              French                              fr
                              Italian                              it
                              Japanese                              ja
                              Dutch                              nl
                              Korean                              ko
                              Russian                              ru
                              Vietnamese                              vi
                              Turkish                              tr
                              Portuguese                              pt
                              Thai                              th
                              Chinese simplified /traditional                           zh-cn/zh-tw

 

Example:

HTML




<!doctype html>
<html amp>
  
<head>
    <meta charset="utf-8">
    <title>Google AMP amp-date-countdown</title>
  
    <!-- Include the `amp-date-countdown` 
        component ... -->
    <script async custom-element=
        "amp-date-countdown" src=
    </script>
  
    <!-- Include the `amp-mustache` 
        component ... -->
    <script async custom-template=
        "amp-mustache" src=
    </script>
  
    <meta name="viewport" content=
"width=device-width,minimum-scale=1,initial-scale=1">
  
    <link rel="canonical" href=
  
    <style amp-boilerplate>
        body {
            -webkit-animation: -amp-start 8s 
                steps(1, end) 0s 1 normal both;
  
            -moz-animation: -amp-start 8s 
                steps(1, end) 0s 1 normal both;
  
            -ms-animation: -amp-start 8s 
                steps(1, end) 0s 1 normal both;
  
            animation: -amp-start 8s 
                steps(1, end) 0s 1 normal both
        }
  
        @-webkit-keyframes -amp-start {
            from {
                visibility: hidden
            }
  
            to {
                visibility: visible
            }
        }
  
        @-moz-keyframes -amp-start {
            from {
                visibility: hidden
            }
  
            to {
                visibility: visible
            }
        }
  
        @-ms-keyframes -amp-start {
            from {
                visibility: hidden
            }
  
            to {
                visibility: visible
            }
        }
  
        @-o-keyframes -amp-start {
            from {
                visibility: hidden
            }
  
            to {
                visibility: visible
            }
        }
  
        @keyframes -amp-start {
            from {
                visibility: hidden
            }
  
            to {
                visibility: visible
            }
        }
    </style>
    <noscript>
        <style amp-boilerplate>
            body {
                -webkit-animation: none;
                -moz-animation: none;
                -ms-animation: none;
                animation: none
            }
        </style>
    </noscript>
    <script async src=
    </script>
      
    <style amp-custom>
        amp-date-countdown {
            display: block;
        }
    </style>
</head>
  
<body>
    <amp-date-countdown 
        timestamp-seconds="2147483648" 
        locale="en" layout="fixed-height" 
        height="100">
        <template type="amp-mustache">
            {{d}} {{days}}, {{h}} {{hours}}, 
            {{m}} {{minutes}}, {{s}} {{seconds}}
        </template>
    </amp-date-countdown>
  
    <amp-date-countdown 
        timestamp-seconds="2147483648" 
        biggest-unit="minutes" 
        layout="fixed-height" height="100">
        <template type="amp-mustache">
            {{m}} minutes and {{s}} seconds until
            <a href=
                Y2K38
            </a>
        </template>
    </amp-date-countdown>
</body>
  
</html>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :