Related Articles

Related Articles

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

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Adding the amp-mustache component



HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :