redline/dist/redline.min.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 .5s ease;transition:transform .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 .5s ease;transition:transform .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 #000}.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:#000}.redline-hand{position:absolute;width:100%;height:100%;overflow:hidden}.redline-hand .redline-hand-wrap{position:absolute;width:100%;height:100%;-webkit-transition:all .5s ease;transition:all .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 #00f}.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:#00f;border-radius:100%}
/*# sourceMappingURL=redline.min.css.map */