Membuat Border List Animasi Dengan Keyframes Infinite

Berikut ini akan diuraikan langkah-langkah cara membuat ( Border List Animasi Dengan Keyframes Infinite ) semoga artikel kali ini bermanfaat untuk kita semua.
Adapun Cara membuat : ( Border List Animasi Dengan Keyframes Infinite ) sebagai berikut :

DAFTAR ISI CODE [Tampilkan][Sembunyikan]

CSS Kode

<style type='text/css'>
#areaText {margin:-45px auto}
.topList [role="progressbar"][aria-busy="true"] {
position: absolute;padding-top:20px;width:100%;
-webkit-animation: preloader-background linear 3.5s infinite;
-moz-animation: preloader-background linear 3.5s infinite;
animation: preloader-background linear 3.5s infinite}

.topList [role="progressbar"][aria-busy="true"]::before,
.topList [role="progressbar"][aria-busy="true"]::after {
display: block;position: absolute;content: '';top:0;
z-index: 999;height: 20px;
-webkit-animation: preloader-front linear 3.5s infinite;
-moz-animation: preloader-front linear 3.5s infinite;
animation: preloader-front linear 3.5s infinite}

.topList [role="progressbar"][aria-busy="true"]::before {right:50%}
.topList [role="progressbar"][aria-busy="true"]::after {left:50%}
@keyframes preloader-background {
0%, 24.9% {background: #159756}
25%, 49.9% {background: #da4733}
50%, 74.9% {background: #3b78e7}
75%, 100% {background: #fdba2c}}

@keyframes preloader-front {
0% {width: 0;background:#da4733}
24.9% {width: 50%;background:#da4733}
25% {width: 0;background:#3b78e7}
49.9% {width: 50%;background:#3b78e7}
50% {width: 0;background:#fdba2c}
74.9% {width: 50%;background:#fdba2c}
75% {width: 0;background:#159756}
100% {width: 50%;background:#159756}}

@import url(http://fonts.googleapis.com/css?family=Allura|Aladin);
p {font:normal 13px/22px 'Aladin', cursive;;padding:22px 20px 20px;text-align:justify}
.topList {
background-color: #FFFFAF;
background-image:-webkit-linear-gradient(#666 1px, transparent 1px);
background-image: -moz-linear-gradient(#666 1px, transparent 1px);
background-image: linear-gradient(#666 1px, transparent 1px);
-webkit-background-size: 100% 22px;-moz-background-size: 100% 22px;
background-size: 100% 22px;
line-height: 22px !important;position:relative}

.topList:after {
right: 1%;transform: rotate(7deg);-webkit-transform: rotate(7deg);
-moz-transform: rotate(7deg);bottom: 27px;
box-shadow: 0 28px 8px rgba(0,0,0,0.3);content: "";height: 25px;
position: absolute;width: 45%;z-index: -1}
</style>

HTML Kode

<div id="areaText">
<div class="topList">
<div aria-busy="true" aria-label="Loading,please wait." role="progressbar"></div>
<p>..Tulis Teks Anda Disini..</p>
</div>
</div>

Setelah semua kode html, (style, atau b:skin, dan javascript sudah di pasang sesuai posisinya masing-masing langkah terahir adalah Simpan, atau klik pratinjau tema terlebih dahulu,. Namun untuk saran tiada salahnya langsung klik SIMPAN dan lihat hasilnya, jika terjadi eror, dan kode tidak berfungsi dengan baik silahkan informasikan kami di kolom komentar, salam Team SAHAB BISNIS 77.

Demikian Cara membuat ( Border List Animasi Dengan Keyframes Infinite ) semoga bermanfaat terima kasih.

CONTOHNYA

..Tulis Teks Anda Disini..
PayTreners dimanapun anda berapa, seperti kita ketahui bersama, Ustadz Yusuf Mansur telah mencanangkan gerakan membeli saham BRI Syariah.

Untuk dapat berpartisipasi dalam pembelian saham BRI Syariah ini, perlu dilakukan registrasi sebagai anggota Kopindo Syariah secara online melalui aplikasi “Kopindo berjama’ah” yang dapat diunduh melalui playstore Android.

Setelah mengisi secara lengkap data yang ada pada aplikasi, pendaftar akan diminta melakukan transfer sejumlah Rp 1.300.000,- dengan rincian sebagai berikut :

A. Rp. 100.000,- untuk Simpanan Pokok.
B. Rp. 100.000,- untuk Simpanan Wajib.
C. Rp. 1000.000 untuk Simpanan Sukarela Berjangka (SSB) BRIS atau kelipatannya.
D. Rp. 100.000,- untuk biaya Admin per tahun.