Cyber-Art Sekarang Sudah Ada Aplikasinya Download ×

Memasang Progres Bar Seperti Youtube


Hai Sahabat Cyber Art kali ini mimin akan share CARA MEMASANG PROGRESS BAR
Efek Progress bar ini akan muncul ketika halaman blog kalian sedang dalam proses memuat

Bagi Anda Yang Ingin Mencobanya silahkan ikuti cara cara berikut




Pertama buka blogger > Template > Edit HTML,  Decode script di bawah ini lewat sini  Lalu Salin Dan Paste Code Di Bawah Ini Tepat Sebelum Kode </body>

%3cscript+type%3d%22text%2fjavascript%22+src%3d%22http%3a%2f%2fyourjavascript.com%2f22811841195%2fprogressbar.js%22%3e%3c%2fscript%3e
Kemudian Copy dan paste kode di bawah ini tepat sebelum </style> atau ]]><bskin>
.pace .pace-progress {
    background: #e14e42;
    position: fixed;
    z-index: 2000;
    top: 0;
    left: 0;
    height: 2px;
    -webkit-transition: width 1s;
    -moz-transition: width 1s;
    -o-transition: width 1s;
    transition: width 1s;
}

.pace-inactive {
    display: none;
}

Lalu Simpan Template Dan Lihat Hasilnya
Jika anda menginginkan design proggress bar yang lain silahkan copy dan paste CSS di bwah ini


FLASH Circle Theme




.pace {
  -webkit-pointer-events: none;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.pace-inactive {
  display: none;
}

.pace .pace-progress {
  background: #29d;
  position: fixed;
  z-index: 2000;
  top: 0;
  left: 0;
  height: 2px;

  -webkit-transition: width 1s;
  -moz-transition: width 1s;
  -o-transition: width 1s;
  transition: width 1s;
}

.pace .pace-progress-inner {
  display: block;
  position: absolute;
  right: 0px;
  width: 100px;
  height: 100%;
  box-shadow: 0 0 10px #29d, 0 0 5px #29d;
  opacity: 1.0;
  -webkit-transform: rotate(3deg) translate(0px, -4px);
  -moz-transform: rotate(3deg) translate(0px, -4px);
  -ms-transform: rotate(3deg) translate(0px, -4px);
  -o-transform: rotate(3deg) translate(0px, -4px);
  transform: rotate(3deg) translate(0px, -4px);
}

.pace .pace-activity {
  display: block;
  position: fixed;
  z-index: 2000;
  top: 15px;
  right: 15px;
  width: 14px;
  height: 14px;
  border: solid 2px transparent;
  border-top-color: #29d;
  border-left-color: #29d;
  border-radius: 10px;
  -webkit-animation: pace-spinner 400ms linear infinite;
  -moz-animation: pace-spinner 400ms linear infinite;
  -ms-animation: pace-spinner 400ms linear infinite;
  -o-animation: pace-spinner 400ms linear infinite;
  animation: pace-spinner 400ms linear infinite;
}

@-webkit-keyframes pace-spinner {
  0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@-moz-keyframes pace-spinner {
  0% { -moz-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -moz-transform: rotate(360deg); transform: rotate(360deg); }
}
@-o-keyframes pace-spinner {
  0% { -o-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -o-transform: rotate(360deg); transform: rotate(360deg); }
}
@-ms-keyframes pace-spinner {
  0% { -ms-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -ms-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes pace-spinner {
  0% { transform: rotate(0deg); transform: rotate(0deg); }
  100% { transform: rotate(360deg); transform: rotate(360deg); }
}


Barber Shop Theme 

.pace {
  -webkit-pointer-events: none;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.pace-inactive {
  display: none;
}

.pace .pace-progress {
  background-color: #29d;
  position: fixed;
  z-index: 2000;
  top: 0;
  left: 0;
  height: 12px;
  overflow: hidden;

  -webkit-transition: width 1s;
  -moz-transition: width 1s;
  -o-transition: width 1s;
  transition: width 1s;
}

.pace .pace-progress-inner {
  position: absolute;
  top: 0;
  left: 0;
  right: -32px;
  bottom: 0;

  background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.2)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.2)), color-stop(0.75, rgba(255, 255, 255, 0.2)), color-stop(0.75, transparent), to(transparent));
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
  background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
  background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
  -webkit-background-size: 32px 32px;
  -moz-background-size: 32px 32px;
  -o-background-size: 32px 32px;
  background-size: 32px 32px;

  -webkit-animation: pace-stripe-animation 500ms linear infinite;
  -moz-animation: pace-stripe-animation 500ms linear infinite;
  -ms-animation: pace-stripe-animation 500ms linear infinite;
  -o-animation: pace-stripe-animation 500ms linear infinite;
  animation: pace-stripe-animation 500ms linear infinite;
}

@-webkit-keyframes pace-stripe-animation {
  0% { -webkit-transform: none; transform: none; }
  100% { -webkit-transform: translate(-32px, 0); transform: translate(-32px, 0); }
}
@-moz-keyframes pace-stripe-animation {
  0% { -moz-transform: none; transform: none; }
  100% { -moz-transform: translate(-32px, 0); transform: translate(-32px, 0); }
}
@-o-keyframes pace-stripe-animation {
  0% { -o-transform: none; transform: none; }
  100% { -o-transform: translate(-32px, 0); transform: translate(-32px, 0); }
}
@-ms-keyframes pace-stripe-animation {
  0% { -ms-transform: none; transform: none; }
  100% { -ms-transform: translate(-32px, 0); transform: translate(-32px, 0); }
}
@keyframes pace-stripe-animation {
  0% { transform: none; transform: none; }
  100% { transform: translate(-32px, 0); transform: translate(-32px, 0); }
}

Sourcer : http://arlinadesign.blogspot.com

Related Posts:

11 Responses to "Memasang Progres Bar Seperti Youtube"

  1. Wah keren bener, jadi pengen pasang nih.. Ctrl + D aja dah dulu.

    BalasHapus
  2. Mantep Kakak :D
    Udah Ane G+ ^_^

    BalasHapus
  3. wah bikin tampilan blog lebih elegan, gak berat lagi . .makasih gan

    BalasHapus
  4. Lumayan tuh widgetnya buat nambah pernak pernik

    BalasHapus
  5. Artikel yang bagus gan :)

    blog sudah saya follow gan...

    please mampir ke blog ane kasih comment dikit

    lalu follow back blog ane ya gan...

    Silakan Kunjungi blog ane ya gan ^_^

    BalasHapus
  6. Analyses as well as various tasks furthermore the option DadeSchools Student Login It is the biggest college with the college area prolongs more than 2,000 square miles.

    BalasHapus
  7. Terima kasih telah berbagi pengaturan pembayaran ini, saya akan menerapkannya sekarang!

    BalasHapus
  8. Good post. It helps me much.

    BalasHapus
  9. Quakes Alerts arrived to offer notifications seconds before the earthquake strikes. In recent years, hundreds of sensors have been placed near areas where significant earthquakes can occur; and those sensors are capable of detecting the first seismic waves, as well as assessing and predicting how strong the movement will be to issue warnings. With the new earthquake warning, you will now have the ability to act seconds before feeling the shake, and you will be able to: know that an earthquake has already started, have time to drop, cover and hold on”.
    For more: http://skyalertusa.com/what-can-we-do-with-earthquake-early-warning/

    BalasHapus
  10. Each zone is associated with an area map. The larger area you are going to survey the more reasonable it is to zone it and perform survey in stages. It is especially useful for larger projects spreading onto multiple floors in a large building.

    BalasHapus

Attention !!!!!

1.Pastikan untuk " Berlangganan Lewat Email " untuk membangun kreatifitas blog ini
2. Link aktiv tidak akan berpungsi.
3. Dilarang Menyebarluaskan Spam,Phising Dan Lain-Lain
4.Have a nice day :)

Back to top