<p class="statusrilis">Nama Blog</p> <div id="statusrilis"> <div id="status"> <div class="titleA"> <p class="title1"> <span class="persen">100%</span> JUDUL ANIME DISINI </p> </div> <div class="titleB"> <p class="title2"> Encode: 100%, Retiming: 100%, Translate: 100%, Upload: 100% </p> </div> <div class="arrow"> <div class="arrow-status" style="width: 100%;"> <span class="arrow-pointer"></span> </div> </div> </div> <div id="status"> <div class="titleA"> <p class="title1"> <span class="persen">50%</span> JUDUL ANIME DISINI </p> </div> <div class="titleB"> <p class="title2"> Encode: 50%, Retiming: 50%, Translate: 50%, Upload: 50% </p> </div> <div class="arrow"> <div class="arrow-status" style="width: 50%;"> <span class="arrow-pointer"></span> </div> </div> </div> </div>
/* CSS Status Rilis Tiramisub by Nukodezign */ .statusrilis {font-size: 19px;text-align: center;background: #82aac3;margin-top: 10px;margin-bottom: 0;padding: 10px;color: white;} .titleA{width: auto;margin-bottom: -32px;margin-left: 2px;margin-top: -20px} .titleB{width: auto;margin-bottom: -23px;margin-left: 2px;margin-top: -20px} p.title1{font-family: 'Fresca';font-size: 20px;line-height: 130%;margin-bottom: 36px} p.title2{font-family: 'Fresca';font-size: 15px} .arrow{position: relative;width: 100%;height: 2px;background: rgba(58, 166, 208, 0.2)} .arrow-status{text-align: right;padding-right: .5em;padding-left: .5em;background-color: #82aac3;border-color: white;width: 0%;color: white;height: 100%;line-height: 1.2em;-webkit-animation: width .5s ease-in;font-family: 'Fresca';white-space: nowrap;font-size: 16px} .arrow-pointer2{background-color: white;display: inline-block;width: 1em;height: 3em;position: relative;left: 100%;top: -1em;margin-left: -2em;margin-bottom: -2em;border-radius: 0 5px 5px 0} span.persen{background: #82aac3;padding: 3px;border-radius: 5px;color: white}