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=
"https://cdn.ampproject.org/v0/amp-date-countdown-0.1.js">
</script>

Adding the amp-mustache component

HTML

<script async custom-template="amp-mustache" src=
"https://cdn.ampproject.org/v0/amp-mustache-0.2.js">
</script>

Attributes:

end-date: It is ISO formatted date to count down to.
timeleft-ms: Millisecond value to count down to.
offset-seconds: A number to be added to the end date. It could be positive or negative.
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.
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=
"https://cdn.ampproject.org/v0/amp-date-countdown-0.1.js">
    </script>
  
    <!-- Include the `amp-mustache` 
        component ... -->
    <script async custom-template=
        "amp-mustache" src=
"https://cdn.ampproject.org/v0/amp-mustache-0.2.js">
    </script>
  
    <meta name="viewport" content=
"width=device-width,minimum-scale=1,initial-scale=1">
  
    <link rel="canonical" href=
"https://amp.dev/documentation/examples/components/amp-date-countdown/index.html">
  
    <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=
        "https://cdn.ampproject.org/v0.js">
    </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=
"https://en.wikipedia.org/wiki/Year_2038_problem">
                Y2K38
            </a>
        </template>
    </amp-date-countdown>
</body>
  
</html>

Output:

My Personal Notes

Related Articles

HTML

HTML

HTML