Create Circular Countdown Timer - jQuery plugin
- or -
Post a project like this3348
$$
- Posted:
- Proposals: 0
- Remote
- #670449
- Completed
Description
Experience Level: Intermediate
General information for the website: JQuery plugin development
Num. of web pages/modules: 1
Description of every page/module: What we need is a countdown timer jQuery plugin that is responsive and can be used with a bootstrap. It should work and look a same on the desktop machines as on mobile devices. Once you start it, you get a display that shows minutes and seconds remaining and counts down to 0. If you take a look at the attached image, graphically, seconds remaining is shown by an inner circle and minutes remaining by and outer circle. Primary input would be number of seconds to start counting down from. For instance: 160. That would start counting down 2 minutes and 40 seconds.
Description of requirements/features: Features:
- needs to be responsive (when resizing browser, countdown timer should resize accordingly)
- needs to be able to specify outer circle colour which can be different than the inner circle colour
- needs to be able to specify outer circle colour and inner circle colour for countdown timer to change when timer reaches 0
- when timer reaches 0, custom text needs to be shown instead of the 0 minutes and 0 seconds.
- needs to be able to reset the count down time without creating a new countdown timer instance
- circles show be animated with a sweep rather than a tick.. so they should be updated every couple of milliseconds and not on each second tick.
-needs to control the thickness of the circles
CMS and Admin requirements: Methods required:
- start(seconds);
- stop(); - stops the timer, keeps showing the time at the stop point
Similar urls: http://www.class.pm/files/jquery/classycountdown/
Extra notes:
Num. of web pages/modules: 1
Description of every page/module: What we need is a countdown timer jQuery plugin that is responsive and can be used with a bootstrap. It should work and look a same on the desktop machines as on mobile devices. Once you start it, you get a display that shows minutes and seconds remaining and counts down to 0. If you take a look at the attached image, graphically, seconds remaining is shown by an inner circle and minutes remaining by and outer circle. Primary input would be number of seconds to start counting down from. For instance: 160. That would start counting down 2 minutes and 40 seconds.
Description of requirements/features: Features:
- needs to be responsive (when resizing browser, countdown timer should resize accordingly)
- needs to be able to specify outer circle colour which can be different than the inner circle colour
- needs to be able to specify outer circle colour and inner circle colour for countdown timer to change when timer reaches 0
- when timer reaches 0, custom text needs to be shown instead of the 0 minutes and 0 seconds.
- needs to be able to reset the count down time without creating a new countdown timer instance
- circles show be animated with a sweep rather than a tick.. so they should be updated every couple of milliseconds and not on each second tick.
-needs to control the thickness of the circles
CMS and Admin requirements: Methods required:
- start(seconds);
- stop(); - stops the timer, keeps showing the time at the stop point
Similar urls: http://www.class.pm/files/jquery/classycountdown/
Extra notes:
Steve P.
97% (18)Projects Completed
45
Freelancers worked with
33
Projects awarded
24%
Last project
20 Aug 2023
United Kingdom
New Proposal
Login to your account and send a proposal now to get this project.
Log inClarification Board Ask a Question
-
There are no clarification messages.
We collect cookies to enable the proper functioning and security of our website, and to enhance your experience. By clicking on 'Accept All Cookies', you consent to the use of these cookies. You can change your 'Cookies Settings' at any time. For more information, please read ourCookie Policy
Cookie Settings
Accept All Cookies