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:

16 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
  11. Oh my goodness! Incredible article dude! Thank you, However I am having difficulties with your RSS. I don’t understand the reason why I can't subscribe to it. Is there anybody getting identical RSS problems? Anyone who knows the answer will you kindly respond? Thanx!! onsite mobile repair bangalore An impressive share! I've just forwarded this onto a friend who has been conducting a little research on this. And he in fact bought me breakfast simply because I stumbled upon it for him... lol. So allow me to reword this.... Thank YOU for the meal!! But yeah, thanks for spending some time to discuss this issue here on your blog. online mobile repair Bangalore

    BalasHapus
  12. After looking over a handful of the blog articles on your blog, I really appreciate your technique of writing a blog. I added it to my bookmark website list and will be checking back soon. Take a look at my web site too and let me know your opinion. online mobile repair whitefield This site truly has all of the information and facts I wanted about this subject and didn’t know who to ask. online mobile repair marathahalli

    BalasHapus
  13. Are you looking to hire top quality Custom Nursing Term Paper Writer and cheap Nursing Term Paper Writing Services? Rather than risking abject failure, you should consider hiring a Legitimate Custom Nursing Writing Provider.

    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