
<div class="gauge-container">
    <!-- text overlay -->
    <div class="text-container">
        <div data-ui="unit" class="unit">unit</div>
        <div></div>
        <div data-ui="value" class="value">---</div>
        <div></div>
        <div data-ui="label" class="radial-gauge2-label">label</div>
    </div>

    <!-- state indicators -->
    <div data-ui="state-symbol" class="icon preWarn"></div>
    <div data-ui="state-symbol" class="icon warn"></div>

    <!-- clock-face -->
    <div data-ui="face" class="face">
        <div class="ref-image">
            <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="100%"
                    height="100%"
                    viewBox="0 0 199 199"
                    >
                <g>
                    <path
                            id="path3863"
                            d="M 190.66628,98.994904 A 90.661186,90.661186 0 1 1 100.1522,8.3338367"
                            transform="matrix(0,1,-1,0,197,-1.0101929)" />
                </g>
            </svg>

        </div>
        <div class="handle-container1">
            <div data-ui="handle" class="handle handle1"></div>
        </div>
        <div class="handle-container2">
            <div data-ui="handle" class="handle handle2"></div>
        </div>
        <div class="handle-container3">
            <div data-ui="handle" class="handle handle3"></div>
        </div>
        <div class="highlight" data-ui="highlight"></div>
    </div>
</div>  