A really simple angular directive to display a loader image while loading ajax resources, relying on Almende Timeline.
Added the range-popup item type to display contents on a tooltip when hovering, so you have to rely on Bootstrap tooltips.
bower install angular-chap-timeline --saveInclude Almende Timeline (CSS, JS) and Bootstrap tooltip (CSS, JS) in your <head> section:
<link rel="stylesheet" href="PATH_TO_STYLES/bootstrap.css">
<link rel="stylesheet" href="PATH_TO_STYLES/timeline.css">
<script src="PATH_TO_LIB/timeline.js"></script>
<script src="PATH_TO_LIB/bootstrap-tooltip.js"></script>Create a div with the timeline attribute to instantiate a Timeline. Data must be passed as an array of objects, read the Almende Timeline documentation on available fields.
<div timeline="data"
timeline-options="options"
timeline-full-range-update="true"
timeline-ctrl="timeline"
timeline-selection="selection"></div>The timeline-options attribute provides access to Timeline configuration, read the Almende Timeline documentation on available options.
The timeline-full-range-update attribute boolean that activate timeline.setVisibleChartRangeAuto() on data update.
The timeline-ctrl attribute provide access to timeline object.
The timeline-selection attribute provides two-way binding on selected/selecting object.
Credits to Almende providing the excellent CHAP Links Library