@pageblock/attributes-countdown
v0.1.8
Published
Create customizable countdown timers for Webflow with no-code.
Downloads
91
Maintainers
pageblockReadme
@pageblock/attributes-countdown
Create customizable countdown timers for Webflow with no-code.
Features
- Multiple formats: Days, hours, minutes, seconds
- Customizable display: Show/hide specific units, customize labels
- Expiration handling: Custom actions when countdown reaches zero
- Timezone support: Accurate across different timezones
- Event callbacks: Hooks for tick and complete events
- No dependencies: Pure JavaScript with no external libraries required
Installation
CDN (Recommended for Webflow)
<!-- Add to the <head> section -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@pageblock/attributes-countdown@latest/index.css">
<!-- Add before </body> -->
<script src="https://cdn.jsdelivr.net/npm/@pageblock/attributes-countdown@latest/index.js"></script>NPM
npm install @pageblock/attributes-countdownimport { Countdown } from '@pageblock/attributes-countdown';
import '@pageblock/attributes-countdown/index.css';Usage
Basic HTML Structure
<!-- Countdown Container -->
<div data-pb-countdown="2025-12-31T23:59:59">
<!-- Days -->
<div data-pb-countdown-unit="days">
<span data-pb-countdown-value>00</span>
<span data-pb-countdown-label>Days</span>
</div>
<!-- Hours -->
<div data-pb-countdown-unit="hours">
<span data-pb-countdown-value>00</span>
<span data-pb-countdown-label>Hours</span>
</div>
<!-- Minutes -->
<div data-pb-countdown-unit="minutes">
<span data-pb-countdown-value>00</span>
<span data-pb-countdown-label>Minutes</span>
</div>
<!-- Seconds -->
<div data-pb-countdown-unit="seconds">
<span data-pb-countdown-value>00</span>
<span data-pb-countdown-label>Seconds</span>
</div>
</div>JavaScript API
// Initialize all countdowns on the page
PageBlockCountdown.init();
// Create a new countdown programmatically
PageBlockCountdown.create({
target: document.querySelector('#my-countdown'),
endDate: '2025-12-31T23:59:59',
onTick: (remaining) => {
console.log('Remaining time:', remaining);
},
onComplete: () => {
console.log('Countdown completed!');
}
});Configuration Options
Data Attributes
data-pb-countdown: The end date in ISO format (e.g., "2025-12-31T23:59:59")data-pb-countdown-unit: The unit type ("days", "hours", "minutes", "seconds")data-pb-countdown-value: The element that will display the valuedata-pb-countdown-label: The element that will display the labeldata-pb-countdown-timezone: Optional timezone (e.g., "America/New_York")data-pb-countdown-format: Optional format for the values (e.g., "00" for leading zeros)data-pb-countdown-hide-zero: Optional attribute to hide units when they reach zero
Event Listeners
document.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll('[data-pb-countdown]').forEach(countdown => {
countdown.addEventListener('countdown:tick', function(event) {
console.log(`Countdown tick: ${event.detail.remaining}`);
// Add your analytics code here
});
countdown.addEventListener('countdown:complete', function(event) {
console.log(`Countdown completed!`);
// Add your analytics code here
});
});
});License
MIT