Fitness Web Components

Move
Exercise
Stand

This is a demo of the fitness card and activity ring components, with default and alternative styles. You can use a fully featured fitness card or just the activity rings. The default activity ring design is inspired by Apple Fitness.

You can download code from the fitness visualisations repository on GitHub.

Web Components

These visualisations are built using Web Components and must be imported before they are rendered. If you are using the fitness card, then you do not need to import the activity ring. 

import './FitnessCard.js';
import './FitnessRing.js';

Styling

The typeface and colours of the text and rings can be changed using CSS variables. The --fitness-value controls the colour of the values in the footer.

The colours of the fitness card values are linked to the ring colours, so they can not be configured independently. To change the fitness card colours you must use the CSS variable without the -ring value. 

--fitness-font: sans-serif;

--fitness-value: #9ca3af;
--fitness-calories: #fa114f;
--fitness-minutes: #92e82a;
--fitness-hours: #1eeaef;

--fitness-ring-calories: #fa114f;
--fitness-ring-minutes: #92e82a;
--fitness-ring-hours: #1eeaef;

If you provide labels, they can be styled using --fitness-label CSS variable. You can target each label independently by using the appropriate [slot] selector and setting the CSS variable. 

fitness-ring [slot="label-calories"] {
    --fitness-label: #B31162;
}
fitness-ring [slot="label-minutes"] {
    --fitness-label: #1FAD8F;
}
fitness-ring [slot="label-hours"] {
    --fitness-label: #1689A0;
}

You can target the styling of sections within the fitness card component using the :part pseudo-element. 

fitness-card::part(header) {}
fitness-card::part(main) {}
fitness-card::part(ring) {}
fitness-card::part(footer) {}

Cards

To use the fitness card you must create a <fitness-card> element with the relevant attributes representing the data. The following attributes are required:

calories-total="integer"
The achieved “calories” value.
calories-goal="integer"
The goal for the “calories” value.
Represented in kilocalories.
minutes-total="integer"
The achieved “minutes” value.
minutes-goal="integer"
The goal for the “minutes” value.
Represented in minutes.
hours-total="integer"
The achieved “hours” value.
hours-goal="integer"
The goal for the “hours” value.
Represented in hours.

The date is optional. The value must be in a format that can be parsed by the Date object in JavaScript. If it is not set, then the card header is not rendered.

steps, distance and flights values are also optional. If none of these values are provided, then the card footer is not rendered.

The distance attribute should be provided in in meters. By default, this is converted to miles but you can change this to kilometres using the units="km" attribute. 

<fitness-card
    date="2023-06-04"
    steps="5258"
    distance="2455"
    units="mi"
    flights="3"
    calories-total="1800"
    calories-goal="1400"
    minutes-total="20"
    minutes-goal="30"
    hours-total="9"
    hours-goal="12"
></fitness-card>

Default Visualisation

This is the default fitness card visualisation. There is no maximum width set for the card as the components are designed to fit within any existing design.

Distance in Kilometres, Custom Background & Labels

This example of the fitness card visualisation shows a custom design, inspired by the Apple Fitness interface. The background, header and footer have been styled in CSS. The text for “calories”, “minutes” and “hours” have been changed. The units have been changed to kilometres and mini Heroicons labels have been added to the activity ring.

Move
Exercise
Stand

Header Text, No Footer, Custom Style

This shows the fitness card visualisation with a custom header text and no footer. The text for “minutes” and “hours” have been changed. The replayable attribute has been set, which allows the animation to be replayed when the rings are clicked. The font has been updated to a sans-serif typeface and the colours have been customised.

Goals for 22nd August 2023
Running
Sleep

Rings

To use the activity ring, you must create a <fitness-ring> element with the relevant attributes representing the data. This component has the same required attributes as the fitness card. 

<fitness-ring
    calories-total="1800"
    calories-goal="1400"
    minutes-total="20"
    minutes-goal="30"
    hours-total="9"
    hours-goal="12"
></fitness-ring>

Default

The regular ring design

Replayable

With icons

Alternative

Custom colours via CSS

Muted

With coloured icons

Download code from the fitness visualisations repository on GitHub.