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:

25 Responses to "Memasang Progres Bar Seperti Youtube"

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

    BalasHapus
    Balasan
    1. That is mention and There many good contents are available and manual blog commenting services. Besides you have to know about study other things from home it helps to develop your education skills.

      Hapus
  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
    Balasan
    1. I need a progress bar for my site Editing and Proofreading Service to complete my task. This article guide me to complete my work. Understudies and beginners are waiting for such post so thank a lot.

      Hapus
  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
  14. Thank you for sharing this payment arrangement, Really informative info in this post....


    IOS app development in Dubai

    BalasHapus
  15. Excellent, Thank you so much! I would like to think I inspired you to make this post but either way you solved the biggest problem I had!
    Write my assignment for me uk | British assignment writers

    BalasHapus
  16. If you want to install McAfee antivirus through mcafee.com/activate, you can call live antivirus professionals to get full guidance for it. Our antivirus experts have the great skills for installing McAfee antivirus through mcafee.com/activate product key. Our helpline number is the suitable option for you to get instant support or quality help.

    BalasHapus
  17. My friend just emailed me a link to this article nokia service center in chennai and I have to say that it's been a while since I read anything through from start to finish. Thanks. It was a brilliant way to begin my day. iPhone Service Center near me

    BalasHapus
  18. I can see that you are an expert in this field! I am launching a website soon, lenovo mobile service center in chennai and your information will be very useful for me.. Thanks for all your help and wishing you all the success in your business. Mi Service Center near me

    BalasHapus
  19. If you are a student this information is for you. I know a place where you can buy a story of an hour essay. There are many suggestions on this site. You can buy any material on any topic. You can make learning easier.

    BalasHapus
  20. The ultimate goal of online psychology research paper writing services is to provide Psychology Assignment Writing Services and psychology research paper services since most psychology coursework writing service students lack time to complete their custom psychology coursework writing services.

    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