Text Meter

---

Html

JavaScript

/* Options */
var options = {
  // Percentage number value. Range 0 to 100.
  value: 10,
  // Display text.
  displayValue: 'TEST',
  // Arrow color.
  arrowColor: '#007bfb',
  // Marker that shows percentage number.
  marker: {
    // Background color.
    bgColor: '#343a42',
    // Font color.
    fontColor: '#ffffff'
  },
  // Bar that has text inside.
  bar: {
    // Scrolling speed.
    speed: 5,
    // Bar fill color.
    fillColor: '#dc3547',
    // Bar background color.
    bgColor: '##f8f8ff',
    // Border line color.
    borderColor: '#343a42'
  }
}
/* Constructor */
var textMeter = new zeu.TextMeter('text-meter', options);

/* Setter */
textMeter.value = 50;
textMeter.displayValue = 'ZEU';
textMeter.speed = 5;
textMeter.fillColor = '#dc3547';
textMeter.bgColor = '#f8f8ff';
textMeter.arrowColor = '#007bfb';
textMeter.markerFontColor = '#ffffff';
textMeter.markerBgColor = '#343a42';

More examples

Increase view width to 400. Change color based on the value.