redline/dist/redline.css

Customizable html gauge

.redline {
  display: block;
  position: relative;
  width: 400px;
  height: 400px;
  font-family: Arial, Sans-Serif;
  font-size: 20px;
  line-height: 1em; }
  .redline * {
    box-sizing: border-box; }

.redline-dial {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%; }
  .redline-dial .redline-dial-segment {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: visible;
    -webkit-transform-origin: center;
        -ms-transform-origin: center;
            transform-origin: center; }
    .redline-dial .redline-dial-segment .redline-dial-segment-wrap {
      position: absolute;
      width: 50%;
      height: 100%;
      top: 0;
      right: 0;
      overflow: hidden;
      -webkit-transform-origin: left center;
          -ms-transform-origin: left center;
              transform-origin: left center;
      -webkit-transition: -webkit-transform 0.5s ease;
              transition: transform 0.5s ease; }
      .redline-dial .redline-dial-segment .redline-dial-segment-wrap .redline-dial-segment-wrap-wrap {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        right: 100%;
        overflow: hidden;
        -webkit-transform-origin: right center;
            -ms-transform-origin: right center;
                transform-origin: right center;
        -webkit-transition: -webkit-transform 0.5s ease;
                transition: transform 0.5s ease; }
        .redline-dial .redline-dial-segment .redline-dial-segment-wrap .redline-dial-segment-wrap-wrap .redline-dial-segment-line {
          position: absolute;
          width: 200%;
          height: 100%;
          border-radius: 100%;
          border: 3px solid black; }
    .redline-dial .redline-dial-segment.redline-dial-segment-warning .redline-dial-segment-line {
      border-color: orange !important; }
    .redline-dial .redline-dial-segment.redline-dial-segment-danger .redline-dial-segment-line {
      border-color: red !important; }
    .redline-dial .redline-dial-segment .redline-dial-segment-mark {
      display: block;
      position: absolute;
      width: 1em;
      height: 1em;
      top: 100%;
      left: 0;
      right: 0;
      margin: auto; }
      .redline.redline-inner-marks .redline-dial .redline-dial-segment .redline-dial-segment-mark {
        top: auto;
        bottom: 3px; }
        .redline.redline-inner-marks .redline-dial .redline-dial-segment .redline-dial-segment-mark .redline-dial-segment-mark-wrap {
          top: auto;
          bottom: 100%; }
          .redline.redline-inner-marks .redline-dial .redline-dial-segment .redline-dial-segment-mark .redline-dial-segment-mark-wrap.redline-dial-segment-mark-left-fit span {
            right: auto;
            left: 0; }
          .redline.redline-inner-marks .redline-dial .redline-dial-segment .redline-dial-segment-mark .redline-dial-segment-mark-wrap.redline-dial-segment-mark-right-fit span {
            left: auto;
            right: 0; }
      .redline-dial .redline-dial-segment .redline-dial-segment-mark .redline-dial-segment-mark-wrap {
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 100%;
        text-align: center;
        -webkit-transform-origin: center;
            -ms-transform-origin: center;
                transform-origin: center;
        -webkit-transform: rotate(-40deg);
            -ms-transform: rotate(-40deg);
                transform: rotate(-40deg); }
        .redline-dial .redline-dial-segment .redline-dial-segment-mark .redline-dial-segment-mark-wrap.redline-dial-segment-mark-left-fit span {
          position: absolute;
          right: 0; }
        .redline-dial .redline-dial-segment .redline-dial-segment-mark .redline-dial-segment-mark-wrap.redline-dial-segment-mark-right-fit span {
          position: absolute;
          left: 0; }
      .redline-dial .redline-dial-segment .redline-dial-segment-mark:before {
        display: block;
        position: absolute;
        content: "";
        width: 2px;
        height: 50%;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        background: black; }

.redline-hand {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden; }
  .redline-hand .redline-hand-wrap {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-transition: all 0.5s ease;
            transition: all 0.5s ease;
    -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
            transform: rotate(180deg); }
    .redline-hand .redline-hand-wrap .redline-hand-arrow {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -6px;
      width: 0;
      height: 0;
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
      border-top: 100px solid blue; }
    .redline-hand .redline-hand-wrap .redline-hand-center {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -10px;
      margin-top: -10px;
      width: 20px;
      height: 20px;
      background: blue;
      border-radius: 100%; }