.skylo {
    position:fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: none;
    z-index: 1000;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
}

.skylo .bar{
    width:0%;
    height: 5px;
    margin:0;
    position:relative;
}

    .skylo span {
        width: 50px;
        height: 100%;
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        -moz-box-shadow: #004666 1px 0 6px 1px;
        -ms-box-shadow: #004666 1px 0 6px 1px;
        -webkit-box-shadow: #004666 1px 0 10px 1px;
        box-shadow: #004666 1px 0 10px 1px;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        border-radius: 50%;
        opacity: 0.6;
    }



skylo .bar-success span {
    -moz-box-shadow: #004666 1px 0 6px 1px;
    -ms-box-shadow: #004666 1px 0 6px 1px;
    -webkit-box-shadow: #004666 1px 0 10px 1px;
    box-shadow: #004666 1px 0 10px 1px;
}

.skylo .bar-warning span{
  -moz-box-shadow: rgb(242,172,67) 1px 0 6px 1px;
	-ms-box-shadow: rgb(242,172,67) 1px 0 6px 1px;
	-webkit-box-shadow:rgb(242,172,67) 1px 0 10px 1px;
	box-shadow: rgb(242,172,67) 1px 0 10px 1px;
}

.skylo .bar-danger span{
  -moz-box-shadow: rgb(219,82,75) 1px 0 6px 1px;
	-ms-box-shadow: rgb(219,82,75) 1px 0 6px 1px;
	-webkit-box-shadow:rgb(219,82,75) 1px 0 10px 1px;
	box-shadow: rgb(219,82,75) 1px 0 10px 1px;
}