Race Countdown Widgets

Add live countdown timers to your website for 25+ major motorsport series. Free, lightweight, and fully customizable widgets that automatically update to show the next session or race. Simple implementation with zero dependencies.

Quick Start

Copy and paste the following code snippet into your HTML where you want the widget to appear:

<div id="motorsports-calendar-countdown" 
     data-series="f1"
     data-theme="light"></div>
<script src="https://motorsportscalendar.com/widgets/countdown.js"></script>

That's it! The widget will automatically display a countdown to the next session for your chosen series.

Live Examples

Formula 1

MotoGP

Multi-Series Rotation

Rotating between all series

Configuration Reference

Customize your widget using the following data attributes:

data-series

Property Value
Description Specify which racing series to track. Use all for the next event across all series, or specify one or more series codes separated by commas.
Default all
Available Series f1, f2, f3, f1-academy, indycar, indylights, formula-e, wec, lemans, imsa, nascar-cup, nascar-xs, nascar-truck, nascar-euro, super-formula, supergt, dtm, v8supercars, motogp, moto2, moto3, wsbk, wrc, dakar, aslms, elms, british-gt, intercontinental-gt-challenge, gt-world-challenge-america, gt-world-challenge-europe, gt4-america, porsche-supercup, tc-america, roc, extreme-e, btcc
Example data-series="f1" or data-series="f1,motogp,wec"

data-theme

Property Value
Description Choose between light or dark theme to match your website's design
Default light
Options light, dark
Example data-theme="dark"

data-display

Property Value
Description Control the amount of information displayed. compact shows event name and countdown, full includes circuit information.
Default compact
Options compact, full
Example data-display="full"

data-rotate

Property Value
Description Enable automatic rotation between multiple series. Only works when multiple series are specified (e.g., data-series="f1,motogp,wec"). The widget will show the next event for each series in rotation.
Default no
Options no, yes
Example data-rotate="yes"

data-rotate-interval

Property Value
Description Time in milliseconds between rotations when data-rotate="yes". Controls how long each series is displayed before switching to the next.
Default 3000 (3 seconds)
Options Any positive number in milliseconds
Example data-rotate-interval="5000" (5 seconds)

data-color

Property Value
Description Customize the accent color used for countdown numbers, event titles, and links
Default #1a1a1a
Options Any valid CSS color (hex, rgb, rgba, named colors)
Example data-color="#c97900" or data-color="rgb(201, 121, 0)"

data-weather-display

Property Value
Description Add weather forecasts for the circuit location. minimal shows current conditions, full displays a multi-day forecast.
Default no
Options no, minimal, full
Example data-weather-display="full"
Note Weather data provided by Open-Meteo (attribution automatically included)

data-weather-bg-color

Property Value
Description Background color for the weather section
Default rgba(0, 0, 0, 0.05) for light theme
rgba(255, 255, 255, 0.05) for dark theme
Options Any valid CSS color
Example data-weather-bg-color="#1a1a1a"

data-weather-text-color

Property Value
Description Text color for the weather section
Default inherit
Options Any valid CSS color
Example data-weather-text-color="#ffffff"

data-time-size

Property Value
Description Font size for countdown numbers
Default 1.5em
Options Any valid CSS font size (em, rem, px, %)
Example data-time-size="2em"

data-label-size

Property Value
Description Font size for countdown labels (Days, Hours, Minutes, Seconds)
Default 0.8em
Options Any valid CSS font size (em, rem, px, %)
Example data-label-size="0.9em"

Advanced Examples

Dark Theme

Perfect for dark mode websites or matching your brand colors:

<div id="motorsports-calendar-countdown-dark" 
     data-series="f1" 
     data-theme="dark"></div>
<script src="https://motorsportscalendar.com/widgets/countdown.js"></script>

Full Display with Circuit Information

Show additional details including circuit name with clickable links:

<div id="motorsports-calendar-countdown-multi" 
     data-series="f1,motogp,wec" 
     data-display="full"></div>
<script src="https://motorsportscalendar.com/widgets/countdown.js"></script>

Custom Brand Colors

Match your website's color scheme:

<div id="motorsports-calendar-countdown-custom" 
     data-series="f1" 
     data-color="#c97900"></div>
<script src="https://motorsportscalendar.com/widgets/countdown.js"></script>

Rotating Multiple Series

Automatically rotate between different racing series every few seconds:

<div id="motorsports-calendar-countdown-rotate" 
     data-series="f1,motogp,wec,indycar" 
     data-rotate="yes"
     data-rotate-interval="5000"></div>
<script src="https://motorsportscalendar.com/widgets/countdown.js"></script>

Weather Display - Minimal

Show current weather conditions at the circuit:

<div id="motorsports-calendar-countdown-weather-minimal" 
     data-series="f1" 
     data-weather-display="minimal"></div>
<script src="https://motorsportscalendar.com/widgets/countdown.js"></script>

Weather Display - Full Forecast

Display a complete weather forecast for race weekend:

<div id="motorsports-calendar-countdown-weather-full" 
     data-series="f1" 
     data-weather-display="full"></div>
<script src="https://motorsportscalendar.com/widgets/countdown.js"></script>

Custom Weather Styling

Fully customize weather section colors:

<div id="motorsports-calendar-countdown-weather-custom" 
     data-series="f1" 
     data-weather-display="full"
     data-weather-bg-color="#1a1a1a"
     data-weather-text-color="#ffffff"></div>
<script src="https://motorsportscalendar.com/widgets/countdown.js"></script>

Features

  • 25+ Racing Series: Formula 1, F2, F3, F1 Academy, IndyCar, MotoGP, WEC, NASCAR, WRC, Formula E, and more
  • Real-time Updates: Automatically counts down to the next session with second-by-second precision
  • Session-Level Accuracy: Tracks practice, qualifying, and race sessions individually
  • Multi-Series Rotation: Display multiple series in a single widget with automatic rotation
  • Weather Integration: Optional weather forecasts powered by Open-Meteo
  • Fully Responsive: Adapts to any screen size and container width
  • Zero Dependencies: Pure JavaScript, no jQuery or frameworks required
  • Lightweight: Minimal performance impact on your website
  • Always Free: No API keys, registration, or usage limits

Technical Details

Browser Support

Works in all modern browsers including Chrome, Firefox, Safari, Edge, and Opera. Requires JavaScript enabled.

Widget Sizing

The widget is fully responsive and adapts to 100% width of its parent container. Control the size by wrapping it in a container:

<div style="max-width: 400px; margin: 0 auto;">
    <div id="motorsports-calendar-countdown" data-series="f1"></div>
</div>
<script src="https://motorsportscalendar.com/widgets/countdown.js"></script>

Multiple Widgets

You can embed multiple widgets on the same page by using unique IDs:

<div id="motorsports-calendar-countdown-f1" data-series="f1"></div>
<div id="motorsports-calendar-countdown-motogp" data-series="motogp"></div>
<script src="https://motorsportscalendar.com/widgets/countdown.js"></script>

Note: The script only needs to be included once, even with multiple widgets.

Data Updates

Event and weather data is fetched in real-time from our API. The countdown updates every second. When a session ends, the widget automatically loads the next upcoming session.

Terms of Use

  • The widget is provided free of charge for personal and commercial use
  • Do not modify the widget to remove the "Powered by MotorsportsCalendar.com" attribution
  • Weather data attribution to Open-Meteo is required when using weather features and is automatically included
  • Event data is provided as-is and may be subject to schedule changes by the respective racing series

Support

Having issues or need help? Visit MotorsportsCalendar.com or contact us for support.