Calculate your cycling speed instantly based on cadence, gear ratios, and wheel size. A free, precise tool for cyclists to optimize training and performance.
AI Generation Prompt
Cycling Cadence and Gear Ratio Speed Calculator
Overview
This single-file application is a high-precision, web-based utility designed for road cyclists, mountain bikers, and triathletes. It allows users to calculate theoretical cycling speed by inputting their drivetrain configuration (front chainring teeth and rear cog teeth), pedal cadence (RPM), and wheel size.
Core Features
- Real-Time Calculation: Speed updates instantly as the user modifies any input field, providing immediate feedback without page reloads.
- Unit Flexibility: Toggle seamlessly between Metric (km/h) and Imperial (mph) units.
- Preset Wheel Sizes: A searchable dropdown menu for common tire sizes (e.g., 700c x 25mm, 29" x 2.2", etc.) with an option for custom input.
- Gear Chart Generation: An automatic output displaying how speed changes as cadence increases, helping users visualize different gear intensities.
- Responsive Design: A mobile-first, clean interface that works perfectly on smartphones while on the bike or on desktops for training analysis.
UI Layout
- Header: A simple, clean navigation bar with the tool title and a light/neutral aesthetic.
- Input Section: A structured, grid-based card containing intuitive sliders and input fields for:
- Front Chainring Teeth (Spinner/Slider)
- Rear Cog Teeth (Spinner/Slider)
- Cadence RPM (Slider for quick adjustments)
- Wheel Diameter (Dropdown + Custom input)
- Results Dashboard: A central, prominent display showing the calculated speed. Beneath this, a secondary data table shows calculated "Gear Inches" and "Distance per Revolution (meters)."
Color Palette & Aesthetics
- Base Background: Off-white/Soft gray (#F9FAFB) for a clean, non-glaring look.
- Primary Accent: Vibrant Electric Blue (#2563EB) for interactive elements (buttons, slider handles).
- Text: High-contrast Dark Gray (#1F2937) for readability.
- Surface/Card: Pure white (#FFFFFF) with a subtle drop shadow (0 4px 6px -1px rgba(0, 0, 0, 0.1)) to create depth.
- Transitions: Smooth 0.2s linear easing on all hover effects and slider movements.
Developer Directives
- Architecture: Must be a single HTML file containing internal CSS and Vanilla JS.
- Zero-Storage Policy: Do not use
localStorage,sessionStorage, or cookies. Maintain state using in-memory variables. If the page refreshes, inputs return to defaults. - Performance: Use
requestAnimationFramefor any visual updates to ensure 60fps performance. - Iframe Safety: Ensure no
alert()orprompt()calls are used; use custom HTML modals for any necessary communication. - Library Usage: Tailwind CSS (via CDN) for styling and Lucide Icons (via CDN) for iconography are permitted.
- Mobile Optimization: The input sliders must be large enough for finger interaction (minimum 44px touch targets).
Spread the word
Files being used
Frequently Asked Questions
Everything you need to know about using this application.
How do I calculate cycling speed based on my cadence and gear ratio?
To calculate your cycling speed, you need three primary inputs: your current gear ratio (determined by dividing the number of front chainring teeth by the number of rear cog teeth), your pedal cadence in revolutions per minute (RPM), and your tire's total diameter in millimeters. By multiplying these values, you can determine how many meters your bike travels in one minute. Once you have the distance in meters per minute, you simply convert this figure into your preferred unit of speed, such as kilometers per hour or miles per hour. This tool automates this mathematical process, providing real-time results based on the specific variables you input.
Why is it important to understand the relationship between gear ratio and cadence?
Understanding the interaction between your gears and cadence is essential for improving pedaling efficiency and power output. By finding the optimal gear ratio for your desired cadence, you can maintain a consistent effort level, which is critical for endurance rides, hill climbs, and sprint training. Analyzing these data points allows you to identify 'dead zones' where your cadence is too low, forcing you to mash the pedals and fatigue your muscles prematurely. A cadence and gear ratio calculator helps you optimize your shifting strategy to keep your legs spinning within your preferred physiological sweet spot.
What does gear ratio actually mean in the context of cycling performance?
In cycling, the gear ratio represents the mechanical advantage provided by your drivetrain. It is calculated by dividing the number of teeth on the front chainring by the number of teeth on the rear cog. A higher ratio means each pedal stroke rotates the rear wheel multiple times, which is ideal for high speeds on flat terrain. Conversely, a lower gear ratio means the rear wheel rotates fewer times per pedal stroke, which makes it easier to turn the pedals against resistance, such as during steep climbs. Balancing these ratios is key to managing your physical energy throughout a ride, and this tool helps visualize how these adjustments impact your actual ground speed.
Does wheel and tire size significantly impact the results of this calculator?
Yes, wheel size is a vital component of the calculation because it dictates the circumference of the tire, which is the actual distance the bike travels in one full rotation of the wheel. A larger wheel, such as a 29-inch mountain bike tire, travels a further distance in one revolution than a smaller 26-inch tire, even when the gear ratio and cadence are identical. This calculator takes wheel diameter into account to ensure your speed estimates are as accurate as possible. Whether you are riding a road bike with 700c tires or a mountain bike with wider options, inputting the correct diameter is necessary for achieving a precise calculation of your current speed output.
Related Applications
Free EDI X12 Syntax Highlighter & Parser Tool
@Akhenaten
Free Online SQL Query Minifier & Code Compressor Tool
@Akhenaten
Free Hardy-Weinberg Equilibrium Allele Frequency Calculator
@Akhenaten
Free Scroll Progress Bar Code Generator - HTML/CSS/JS
@Akhenaten