Progress Widget Guildwork

panel.css

.newprogress h4 {margin:0; padding:0;}
.newprogress .turn {
    background: #0e0e0e url(https://cdn.guildwork.net/files/529f138ec16e4d36f91342f4/54d8b986002aa80e5e0a7605.png) no-repeat right top;
    height:48px;
    padding:3px 4px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin-bottom:6px;
    opacity:0.6;
    -webkit-transition: all 0.6s ease; /* Firefox */
    -moz-transition: all 0.6s ease; /* WebKit */
    -o-transition: all 0.6s ease; /* Opera */
    transition: all 0.6s ease; /* Standard */
}
.newprogress .turn.second {background-image:url(https://cdn.guildwork.net/files/529f138ec16e4d36f91342f4/54d8ba9e002aa80e5fd99b75.png)}
.newprogress .turn.final {background-image:url(https://cdn.guildwork.net/files/529f138ec16e4d36f91342f4/54d8badc002aa80e5e0a76b8.png)}
.newprogress .turn:hover {opacity:1;}
.newprogress .cleared span {color: #39CF2F}
.newprogress .turn.primals {background-image:url(https://cdn.guildwork.net/files/529f138ec16e4d36f91342f4/555a3701002aa8543a40a53f.png)}
.newprogress .turn.sephirot {background-image:url(https://cdn.guildwork.net/files/529f138ec16e4d36f91342f4/56c8f360002aa82ce5039527.png)}
.newprogress .turn.ravana {background-image:url(https://cdn.guildwork.net/files/529f138ec16e4d36f91342f4/55929746002aa8241aa50206.png)}
.newprogress .turn.as1 {background-image:url(https://cdn.guildwork.net/files/529f138ec16e4d36f91342f4/55f29eb4002aa87f362ac01f.png)}
.newprogress .turn.as2 {background-image:url(https://cdn.guildwork.net/files/529f138ec16e4d36f91342f4/55f29eb5002aa8127416a8a5.png)}
.newprogress .turn.as3 {background-image:url(https://cdn.guildwork.net/files/529f138ec16e4d36f91342f4/55f2a101002aa8127416a92f.png)}
.newprogress .turn.as4 {background-image:url(https://cdn.guildwork.net/files/529f138ec16e4d36f91342f4/5682d704002aa846ba1ca25d.png)}
.newprogress .turn.as5 {background-image:url(https://cdn.guildwork.net/files/529f138ec16e4d36f91342f4/56d44594002aa875a2262e42.png)}
.newprogress .turn.as6 {background-image:url(https://cdn.guildwork.net/files/529f138ec16e4d36f91342f4/57043f9b002aa83e93296827.png)}
.newprogress .turn.as7 {background-image:url(https://cdn.guildwork.net/files/529f138ec16e4d36f91342f4/571b6a2d002aa8278cb1e33b.png)}
.newprogress .turn h4 span {color:red;}
.newprogress .hidden {display:none; visibility:hidden;}

panelbody.html

<div class="newprogress">
    <div class="turn as1 cleared hidden">
        <h4>Alex Savage 1</h4>
        <span>CLEARED</span>
    </div>

    <div class="turn as2 cleared hidden">
        <h4>Alex Savage 2</h4>
        <span>CLEARED</span>
    </div>

    <div class="turn as3 cleared hidden">
        <h4>Alex Savage 3</h4>
        <span>CLEARED</span>
    </div>

    <div class="turn as4 cleared">
        <h4>Alex Savage 4</h4>
        <span>CLEARED</span>
    </div>

    <div class="turn primals cleared hidden">
         <h4>Extreme Primals</h4>
         <span>CLEARED</span>
    </div>
    <div class="turn as5 cleared">
        <h4>Alex Savage 5</h4>
        <span>CLEARED</span>
    </div>

    <div class="turn as6 cleared">
        <h4>Alex Savage 6</h4>
        <span>CLEARED</span>
    </div>

    <div class="turn as7 cleared">
        <h4>Alex Savage 7</h4>
        <span>CLEARED</span>
    </div>

    <div class="turn sephirot cleared ">
        <h4>Sephirot Extreme</h4>
        <span>CLEARED</span>
    </div>

    <div class="turn ravana cleared hidden">
        <h4>Extreme Primals</h4>
        <span>CLEARED</span>
    </div>

    <div class="turn final cleared hidden">
        <h4>Final Coil of Bahamut</h4>
        <span>CLEARED</span>
    </div>

    <div class="turn second cleared hidden">
         <h4>Second Coil <span>SAVAGE</span></h4>
         <span>CLEARED</span>
    </div>

    <div class="turn first cleared hidden">
         <h4>First Coil of Bahamut</h4>
         <span>CLEARED</span>
    </div>
</div>