Counter

Counter plugin with countdown and progress bar, flexible and easily customizable

Before start

1. Download ZIP
2. First, copy and paste counter.js in your project, and link to it before the closing </body> element.
3. Next, you need to copy and paste css into your project. We can include both SASS or CSS file.

Getting Setup

Instance the plugin, pass right configuration and call start() method.

Note: This plugin does not need jQuery.

  ```
  let counter = new Counter({
    "container": "#counter",
    "start": "2019/12/01 00:00:00",
    "end": "2020/12/11 16:30:00"
  });
  counter.start();
  ```

Template

This is the basic template, but through the data attributes, which you find in the code below, you can create another template

DEMO

<div class="i-counter" id="counter">
    <h3 class="i-counter__title" data-counter="title">
      Remaining time offered
    </h3>
    <div class="i-counter__progressbar" data-counter="progressbar">
      <div class="i-counter__progressbar-line">
        <span class="i-counter__progressbar-line-missing" data-counter="missing"></span>
        <span class="i-counter__progressbar-line-past" data-counter="past">
      </div>
      <div class="i-counter__progressbar-percentage" data-counter="progressbar_percentage">
        <span class="i-counter__progressbar-percentage-missing" data-counter="missing_percentage">0%</span>
        <span class="i-counter__progressbar-percentage-past" data-counter="past_percentage">0%</span>
      </div>
    </div>
    <div class="i-counter__countdown">
      <div class="i-counter__countdown-time" data-counter="countdown">
        <div>
          <p class="i-counter__countdown-value" data-counter="days">0</p>
          <label class="i-counter__countdown-label" data-counter="days_label">days</label>
        </div>
        <div>
          <p class="i-counter__countdown-value" data-counter="hours">0</p>
          <label class="i-counter__countdown-label" data-counter="hours_label">hours</label>
        </div>
        <div>
          <p class="i-counter__countdown-value" data-counter="minutes">0</p>
          <label class="i-counter__countdown-label" data-counter="minutes_label">min</label>
        </div>
        <div>
          <p class="i-counter__countdown-value" data-counter="seconds">0</p>
          <label class="i-counter__countdown-label" data-counter="seconds_label">sec</label>
        </div>
      </div>
      <p class="i-counter__expired-alert" data-counter="expired_alert">Time out</p>
    </div>
  </div>

Other examples of how you can use the plug-in, creating your own template

• DEMO 1
• DEMO 2

Data attribute

Below the data attributes to use in your template

General

• main counter title: data-counter: "title"
• expired message: data-counter: "expired_alert"

Progressbar:

• progressbar container: data-counter: "progressbar",
• missing field: data-counter="missing",
• past field: data-counter="past",
• progressbar percentage container: data-counter="progressbar_percentage",
• missing percentage: data-counter="missing_percentage",
• past percentage: data-counter="past_percentage",

Countdown:

• countdown container: data-counter="countdown",
• days text: data-counter="days",
• days label: data-counter: "days_label",
• hours text: data-counter="hours",
• hours label: data-counter: "hours_label",
• minutes text: data-counter="minutes",
• minutes label: data-counter: "minutes_label",
• seconds text: data-counter="seconds",
• seconds label: data-counter: "seconds_label"

Options

Other options are available besides the mandatory ones

property | type | required | default | notes ------------ | ------------- | ------------- | ------------- | ------------- container | string | yes | undefined | This field is mandatory start | string | yes | undefined | The format to be used is yyyy/mm/dd hh:mm:ss end | string | yes | undefined | The format to be used is yyyy/mm/dd hh:mm:ss progressbar | boolean | no | true | To show or not the progress bar. The field is not mandatory, but by default it is true progressbar_percentage | boolean | no | true | To show or not the progress bar. The field is not mandatory, but by default it is true countdown | boolean | no | true | To show or not the progress bar. The field is not mandatory, but by default it is true add_class_to_parent | string | no | undefined | Just to customizing counter bg_color | string | no | undefined | In the css there is the basic color of the plugin, but with this property you can pass a class to overwrite the base color labels | object | no | "Days", "Hours", "Min", "Sec" | If nothing is passed the default is "Days", "Hours", "Min", "Sec". This is the object you expect: { "days": "", "hours": "", "minutes": "", "seconds": "" } expired_alert | "string" | no | Time out | if no value is passed, the default value is the one passed in the default column title | "string" | no | undefined | The "title" can be statically inserted into the template or dynamically by enhancing the "title" property and inserting the data attribute "data-counter = 'title'" into the template