https://github.com/tleunen/css-pie-chart-timer

Create a pie chart timer/countdown using CSS and Javascript
https://github.com/tleunen/css-pie-chart-timer

Last synced: 4 months ago
JSON representation

Create a pie chart timer/countdown using CSS and Javascript

• Host: GitHub
• URL: https://github.com/tleunen/css-pie-chart-timer
• Owner: tleunen
• License: mit
• Created: 2013-02-24T16:53:34.000Z (over 13 years ago)
• Default Branch: master
• Last Pushed: 2013-03-31T01:01:45.000Z (over 13 years ago)
• Last Synced: 2025-02-13T15:31:53.033Z (over 1 year ago)
• Homepage:
• Size: 109 KB
• Stars: 1
• Watchers: 3
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# CSS Pie Chart Timer

Create a pie chart timer/countdown using CSS and Javascript.

CSS Pie Chart Timer works fine on these browsers:

* IE 9

* Opera

* Firefox

* Chrome

The animation is done in Javascript as it's the only way to make it work properly with IE 9.

## Html

You need to use a specific html hierarchy with css classes to make it work.

* As a timer:

```html

    


        


            


            


                


                


            

        

    

```

* As a countdown:


```html

    


        


        


            


            


        

    

```


As you can see, the only difference between the 2 codes is the `pctCountdown` class.

The `
` block is also optional.


## CSS or LESS

There is two version available in the repo:

* a CSS file with some default values

* a LESS file with a mixin so you can easily use it in your project

## Usage

### CSS

To customize the way the timer/countdown renders, you need to include `pie_chart_timer.css`. After that, you can customize the timer by changing some css classes:

```css

#wrapper1 .pctTimer {

    font-size: 150px; /* The size (width and height) of the timer */

}

#wrapper1 .pctTrack,

#wrapper1 .pctPie .pctSlice {

    border: 0.05em solid #eee; /* size of the border (and track) and the color of the track */

    width: 0.9em;  /* 1em - (2*border-width) */

    height: 0.9em;  /* 1em - (2*border-width) */

}

#wrapper1 .pctPie .pctSlice {

    background: transparent; /* fill-color of the timer */

    border-color: #c0c0c0; /* border color of the timer */

}

```

### LESS

LESS is definitely the easiest way to use this small script. You only need to include `pie_chart_timer.mixin.less`. This will include basic css and provide you a mixin to easily set the size and style of your timer. Here is an example:

```css

#wrapper1 {

    .pie-chart-timer(200px, 10px, #c0c0c0, #eee, transparent);

}

```

The arguments are:

1. The size (width and height) of the timer

2. The size of the border (and track)

3. The color of the border [default: #c0c0c0]

4. The color of the track [default: transparent]

5. The fill-color of the timer [default: transparent]

Only the first two arguments are required.

## Example

You can see an example of the code in `example.html`. This page uses the `css` version of the code. But an example using less is also available in `styles.less`.