.statusicon {
    display: inline-block;
    margin: 4px;
    width: 25px;
    height: 25px;
    border-radius: 12.5px;
    border: 12.5px solid transparent;
    box-sizing: border-box;
    position: relative;
}

.statusicon-pending {
    border-color: #9e9e9e;
}

    .statusicon-pending:before {
        content: '⧖';
        display: block;
        color: white;
        line-height: 0px;
        transform:translateY(-.5px);
        font-size:x-large;
        text-indent:-6.75px;
    }

.statusicon-running {
    border-color: #2196f3;
    animation: spin 4s linear infinite;
}

    .statusicon-running:before {
        content: '↻';
        text-indent: -6.25px;
        transform: rotate(90deg);
        color: white;
        display: block;
        line-height: 0px;
    }

.statusicon-complete {
    border-color: #4caf50;
}

    .statusicon-complete:before {
        content: '✓';
        color: white;
        display: block;
        line-height: 0px;
        text-indent: -6.25px;
        font-weight: bold;
    }

.statusicon-failed {
    border-color: #f44336;
}

    .statusicon-failed:before {
        content: '✕';
        color: white;
        display: block;
        line-height: 0px;
        text-indent: -6.25px;
        font-weight: bold;
    }

.statusicon-unknown {
    border-color: #9e9e9e;
}

    .statusicon-unknown:before {
        content: '?';
        color: white;
        display: block;
        line-height: 0px;
        text-indent: -5px;
        font-weight: bold;
    }

.statusicon-stuck {
    border-color: #ffa726;
}

    .statusicon-stuck:before {
        content: '⚠';
        color: white;
        display: block;
        line-height: 0px;
        text-indent: -6.6px;
    }

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}