Jul 8, 2018
75 Views
0 0

Line Progress Bar, Responsive Circular Countdown and Counter Plugin

Written by

LIVE PREVIEWBUY FOR $9

Line is the web's most advanced progress bar plugin. It's easy to setup, amazingly flexible and ships with beautiful animation presets.

 Contact support

 \

Whether you want to visualize the duration until a certain date, show upload progress or donation, total, Line has got your use case covered.

Quick feature overview:

Visual

  • Beautifully animated | Pick from all sorts of progress animation options, jump, arrive or tween using 20+ easing methods.
  • 10 Unique Presets | Pick one and be done, use as starting point or build your own and peek at the code.
  • Shapes and Directions | Includes Horizontal, Vertical and Circular Progress Bars.
  • Responsive and Mobile Friendly | Works on all sorts of devices.
  • Fast and Accurate | Optimized for fast performance, included timer corrects browser timeout errors and correctly handles document hidden mode.
  • Works on all Major Browser | If not supported, fall back gracefully.

Counter

  • Countdown to Date | Count down to that sale or website launch!
  • Count Up Since Date | How many days ago was our major event?
  • Countdown Scheduler | Automatically countdown towards each Sunday at 10
  • Count values ​​ | How is our sale going?
  • Show plain text | Use as billboard to show text.
  • Auto Sync with Server | Sørg for at den viste tid er synkroniseret med din server.
  • Timezones | Correct duration shown all over the planet.
  • Languages ​​ | Labels and texts can be changed to required locale.

Technical

  • JavaScript and jQuery API | Works standalone but ships with handy wrapper for jQuery.

 \

 Premium Quality

Line is build using the latest HTML 5, CSS 3 and JavaScript techniques.

 Detailed Documentation

Line ships with extensive documentation on all its capabilities.

 Professional Support

Just contact us through the form on the Support page. We are always happy to help with any questions or problems.

LINE FEATURES

  • Beautiful Animations | Today, it's all about a nice and smooth user experience, this is where Line delivers big time.

  • Rendered in Canvas | Line Progressbar Features like shadows, colors, size and shape are all customizable with data attributes.

  • Animation Controls | Set line animation speed and define animation easing modes, ships with 24 different ease methods and 3 natural animation types (arrive, step and jump).

 \

CORE FEATURES

  • Responsive | This is 2017, Of course this plugin is responsive.  :-) "title =": -)

  • Timezone Support | Add a timezone to your date and Tick will make sure the displayed duration is correct all around the globe.

  • Mobile Friendly | Tick ​​is designed to work mobile first and scales nicely to larger resolutions.

  • Very Fast | Tick's code is optimized for performance.

  • Standalone | No client-side or server-side frameworks or libraries are required. But if you like jQuery, Tick Counter ships with a handy jQuery wrapper API.

  • Easy to Configure | Setting up Tick is a matter of adding some classes and data attributes to your HTML and presto, you're ready to go!

  • Layout | Tiny layout framework to compose counters horizontally vertically or lay them on top of each other.

  • Transforms | Tick ​​ships with 30+ data transforms, which you can use to format and animate the output value to your liking.

  • Vanilla JavaScript, jQuery, ES6, AMD or CommonJS | Whether you're an old school JavaScript fanatic or a jQuery lover, Tick's got you covered. The package also contains AMD, CommonJS, ES6 and a Global build of Tick.

  • JavaScript API | Du kan styre Tick fra JavaScript eller jQuery, uansett hvor du liker best. The extensive API documentation should give you a good idea about what is possible with Tick.

  • And Much More | Firefox

Edge

  • Opera
  • Internet Explorer 11+
  • Safari OSX 9+ & iOS 9+ |
  • Read about all Tick's features
  • BROWSER SUPPORT
  • Chrome
  • Safari on Windows is no longer supported by Apple

Android 5+ | Not all Android devices behave the same, works on most modern Android devices, if you run into trouble, let us know Use the API supported

property to determine if the client browser supports Tick.

  • PACKAGE CONTAINS
  • Installation instructions
  • CSS and JavaScript files for various project types

10 Unique Presets

HISTORY 1.5.0

  • | 31-07-2017 Add auto fit to container option, add fit to the data layout
  • attribute to enable.
  • Added complex schedules, multiple schedules can now be combined.
  • Fixed problem where unresume event did not fire after schedule was in wait state.
  • Fixed problems with module version, so it's easier to use in React. 19659068] Improved init logic

1.4.1 | 03-07-2017

  • Fixed problem where jQuery API would not create ticker.

1.4.0 | 08-06-2017

  • Improved rendering performance, elements out of view are no longer redrawn.
  • Add setConstant and setPreset methods that can be used in conjunction with the preset transform to create transform presets.
  • Fixed problem where programmatic creation of view did not work.

1.3.4 | 12-04-2017

  • Fixed problem where removing repeater elements did not work.

1.3.3 | 23-03-2017

  • Improved performance of Flip counters.

1.3.2 | 23-02-2017

  • Improved arrive jump step and tween transforms action of string input.
  • Fixed destroy method destroying a little bit too much property.
  • Fixed tree playing a sound when value did not change.
  • Fixed tree returning the wrong element definition ('audio' instead of 'boom').

1.3.1 | 21-02-2017

  • Fixed problem where Tick.create would throw an error if no item and no options were provided.

1.3.0 | 20-02-2017

  • Initial release of Flip.

1.2.0 | 15-02-2017

  • Initial release of Line.
  • Add cancel method to internal animation function.
  • Add value and tween transform functions.
  • Add data value attribute to default text view.
  • Improved step, jump and arrive transform functions.
  • Improved internal counter setup.

1.1.0 | 31-01-2017

  • Initial release of swap.
  • Improved internal duration code.
  • Fixed timer reset method, did not reset.
  • Added "ms" as milliseconds Time Unit.
  • Added duration transform.

1.0.0 | 26-01-2017

  • Initial release of Dots.

Source

Article Tags:
Article Categories:
Javascript

Jaeho Park completed a Master in Fine Arts at the Hongik University in 1999, followed by a Master in Photographic Studies at the University of Westminster in 2012. After working for many years as a university professor, designer and curator in South Korea.

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.