M-S Blog

Loading...

M-S Blog

Loading...

M-S Blog

Loading...
+
» » » » Cara membuat dan mendesain progress bar sendiri dengan CSS


Cara membuat dan mendesain progress bar sendiri dengan CSS

Wah gak terasa udah tahun 2015 dan baru update ne gara-gara di kul banyak tugas, (curhat dulu, hehhee). Setelah tugas dan UAS selesai admin duduk-duduk dan minum secangkir kopi sambil muter otak kira-kira mau update apa ya, emm, dan ahirnya saya tetapkan untuk buat tutorial desain progress. Untuk hal ini anda wajib ne mengenal siapa tu mbah jquery (library javascript),hahaha bagi yang belum sapa dulu, kenalan gitu sama mbah jquery. dan tentunya Css juga harus wajib mengerti, setidaknya basicnya.
Lanjut ke tutorial ya, siapkan editor kesayangan anda, apakah wajib? ya donk, lah kalau egak mau pake apa? maksudnya kesayangan? ya kalau gak sayang gak mood ngerjainnya nanti.
Setelah itu buat halaman utamanya, masukkan kode HTML di bawah ini, dan jangan lupa library javascriptnya itu di atur dimana anda menaruhkan library.
index.php 
    

  1. <!DOCTYPE HTML>
    2. 

  2. <head>
    3. 

  3.  <meta http-equiv="content-type" content="text/html" />
    4. 

  4.  <meta name="author" content="mmlpro" />
    5. 

  5.  
    6. 

  6.     <script type="text/javascript" src="jquery-1.10.2.js"></script>
    7. 

  7.     
    8. 

  8.  <title>desain progress</title>
    9. 

  9. </head>
    10. 

  10.  
    11. 

  11. <body>
    12. 

  12.  
    13. 

  13. <h1>design progress <sub> by:mmlpro</sub></h1>
    14. 

  14.  
    15. 

  15. <div id="konten">
    16. 

  16.     <button value="25">25%</button>
    17. 

  17.     <button value="50">50%</button>
    18. 

  18.     <button value="75">75%</button>
    19. 

  19.     <button value="100">100%</button>
    20. 

  20.     <a class="run">Run</a>
    21. 

  21.  
    22. 

  22.     <div id="progress"><p>0%</p></div>
    23. 

  23. </div>
    24. 

  24.  
    25. 

  25. </body>
    26. 

  26. </html>
    27.
Udah? cepet banget, padahal aku nulisnya aja lumayan beberapa menit. hehehe
Sekarang cssnya silahkan dicopy. Simpan dengan nama style.css dan panggil css dengan cara external, taruh di dalam element head. Manggil cssnya seperti ini.

<link href="style.css" rel="stylesheet"/>
style.css 
    

  1. body{margin:0;padding:0;background:#eeeeee;font-family: 'lucida grande',sans,verdana,arial,sans-serif;font-size:14px;color:#555555;}
    2. 

  2. h1{
    3. 

  3.     font-weight: normal;
    4. 

  4.     text-align: center;
    5. 

  5.     position: relative;
    6. 

  6. }
    7. 

  7. h1 sub{
    8. 

  8.     font-size: 12px;
    9. 

  9.     position: absolute;
    10. 

  10.     bottom:3px;
    11. 

  11. }
    12. 

  12. #konten{
    13. 

  13.     background-color: #ffffff;
    14. 

  14.     padding:10px 5px;
    15. 

  15.     width:400px;
    16. 

  16.     margin: 0 auto;
    17. 

  17. }
    18. 

  18. a{
    19. 

  19.     border:1px solid #bbb;
    20. 

  20.     background-color: #eeeeee;
    21. 

  21.     cursor: pointer;
    22. 

  22.     padding:0px 5px;
    23. 

  23.     position: relative;
    24. 

  24. }
    25. 

  25. a:after{
    26. 

  26.     content:"";
    27. 

  27.     position: absolute;
    28. 

  28.     top:0px;
    29. 

  29.     bottom:0px;
    30. 

  30.     right:-10px;
    31. 

  31.     border-left:10px #eeeeee solid;
    32. 

  32.     border-top:7px solid transparent;
    33. 

  33.     border-bottom:7px solid transparent;
    34. 

  34. }
    35. 

  35. a:before{
    36. 

  36.     content:"";
    37. 

  37.     position: absolute;
    38. 

  38.     top:-1px;
    39. 

  39.     bottom:-1px;
    40. 

  40.     right:-11px;
    41. 

  41.     border-left:11px #bbb solid;
    42. 

  42.     border-top:7px solid transparent;
    43. 

  43.     border-bottom:7px solid transparent;
    44. 

  44. }
    45. 

  45. button{
    46. 

  46.     border:1px solid #ccc;
    47. 

  47.     background-color: #eeeeee;
    48. 

  48.     cursor: pointer;
    49. 

  49. }
    50. 

  50. #progress{
    51. 

  51.     background-color: #f5f5f5;
    52. 

  52.     border:1px solid #ccc;
    53. 

  53.     margin: 10px 0px;
    54. 

  54.     border-radius: 7px;
    55. 

  55.     -webkit-border-radius: 7px;
    56. 

  56.     -moz-border-radius: 7px;
    57. 

  57.     border-radius: 7px;
    58. 

  58. }
    59. 

  59. #progress p{
    60. 

  60.     text-align: center;
    61. 

  61.     font-weight: bold;
    62. 

  62.     margin:0;
    63. 

  63.     padding:3px 0px;
    64. 

  64.     width:0;
    65. 

  65.     max-width: 100%;
    66. 

  66.     -webkit-border-radius: 7px;
    67. 

  67.     -moz-border-radius: 7px;
    68. 

  68.     border-radius: 7px;
    69. 

  69. }
    70. 

  70. .bgColor1{
    71. 

  71.     background-color: #DF8E84;
    72. 

  72.     color:#ffffff;
    73. 

  73. }.bgColor2{
    74. 

  74.     background-color: #C6DF84;
    75. 

  75.     color:#222;
    76. 

  76. }.bgColor3{
    77. 

  77.     background-color: #7ED777;
    78. 

  78.     color:#ffffff;
    79. 

  79. }
    80.
Tambahkan script jquerynya seperti ini, taruh di file utama dan didalam element head seperti saat manggil css tadi. 
    

  1.     <script type="text/javascript">
    2. 

  2.     $(function(){
    3. 

  3.         var progress=$("#progress");
    4. 

  4.         var kontentProgress=$("#progress p");
    5. 

  5.         var button=$("button");
    6. 

  6.         var runaway=$(".run");
    7. 

  7.         var timer=null;
    8. 

  8.         
    9. 

  9.         //jalankan otomatis
    10. 

  10.         runaway.click(function(){
    11. 

  11.             var i;
    12. 

  12.             i=0;
    13. 

  13.             function tambahProgress(){
    14. 

  14.             i++;
    15. 

  15.             kontentProgress.css({"width":i+"%"}).text(i+"%");
    16. 

  16.             bgcolor(i);
    17. 

  17.             timer=setTimeout(tambahProgress, 50);
    18. 

  18.                 if(i==100){
    19. 

  19.                 clearTimeout(timer);
    20. 

  20.                 kontentProgress.text("Loading selesai");
    21. 

  21.                 }
    22. 

  22.             }
    23. 

  23.         timer=setTimeout(tambahProgress, 50);
    24. 

  24.         });
    25. 

  25.         
    26. 

  26.         //jika button diklik
    27. 

  27.         button.click(function(){
    28. 

  28.             clearTimeout(timer);
    29. 

  29.             var nilaiPersen=$(this).val();
    30. 

  30.             kontentProgress.css({"width":nilaiPersen+"%"}).text(nilaiPersen+"%");
    31. 

  31.             bgcolor(nilaiPersen);
    32. 

  32.         });
    33. 

  33.         
    34. 

  34.         
    35. 

  35.         //pengaturan bacground dan warna
    36. 

  36.         function bgcolor(nilai){
    37. 

  37.             if(nilai<35){
    38. 

  38.                 kontentProgress.removeClass();
    39. 

  39.                 kontentProgress.addClass("bgColor1");
    40. 

  40.             }else if(nilai>35 && nilai<60){
    41. 

  41.                 kontentProgress.removeClass();
    42. 

  42.                 kontentProgress.addClass("bgColor2");
    43. 

  43.             }else if(nilai>60 && nilai<=100){
    44. 

  44.                 kontentProgress.removeClass();
    45. 

  45.                 kontentProgress.addClass("bgColor3");
    46. 

  46.             }
    47. 

  47.         }
    48. 

  48.     });
    49. 

  49.     
    50. 

  50.     </script>
    51.
Nah coba di jalankan file uatamanya dengan browser kesayangan anda. Kalau aku sih pas buatnya makek google chrome (udah kebiasaan pakai google chrome)
Gimana? Jalan atau tidak? jika ada yang eror bisa di tanyakan kok. iya, silahkan saja.
Keterangan :
Disini saya membuatnya untuk simulasi saja. Silahkan atur sendiri dari mana progress ini mendapatkan nilai, entah dengan cara eksekusi waktu ataupun dengan mendeteksi saat eksekusi file. Kalau di tutorial ini saya mengatur nilai progress dari value button dan juga dari looping di setTimout.
Untuk bagian mendapatkan nilai dengan cara klik button, nilai persen di ambil dari value button yang di klik. Coba anda lihat discript jquery bagian button click. terdapat deklarasi variable seperti ini.
var nilaiPersen=$(this).val();
Itu untuk mendapatkan nilai(value) dari button yang di klik. Nah untuk memasukkan nilai persen ke progressnya dan juga nilai panjangnya progress berjalan saya gunakan ini.
kontentProgress.css({"width":nilaiPersen+"%"}).text(nilaiPersen+"%");
Maksud dari script code di atas adalah mengatur panjang element p yang berada di dalam selector #progress menggunakan properti css width, dan megatur text di dalam element p.
Anda melihat ini? bgcolor(nilaiPersen);, itu saya gunakan untuk mengeksekusi Function bgcolor dan mengirimkan nilainya. Function ini saya gunakan untuk mengatur warna background dan text dan didalamnya terdapat if else statement yang akan menerima nilai progress dan mengubah warna progress setiap nilai yang sudah di tentukan di if else. Pengambilan/pengaturan warna dari progress saya gunakan teknik addClass dan removeClass yang nantinya akan menambah class keelement dan menghapus class dielement.
Di element run jika diklik progressnya akan berjalan sendiri saya gunakan setTimeout. Untuk memasukkan nilai ke progress tekniknya sama seperti tadi, cuma bedanya disini mendapatkan nilainya dari looping dan nantinya akan menghentikan setTimeout bila variable i sudah mencapai nilai 100 dengan tekik if statement condisi itu.
clearTimeout(timer); code inilah yang untuk menghentikan setTimeoutnya. Perhatikan deklarasi var yang di buat diatas sendiri, semua berhubungan dengan setTimoutnya kan maka clear timoutnya ditujukan ke timer.
Untuk perubahan warna sama seperti button klik tadi, memanggil function bgcolor(i); dan mengirimkan nilainya dari looping.
Yah, segitu aja yang diterangkan, jika ada yang kurang jelas bisa ditanyakan. Lewat facebook atau kontak lainnya. Terimakasih sudah berkunjung.

DOWNLOAD


re-post from http://mmlpro.com/23/-membuat-dan-mendesain-progress-bar-sendiri.html
05:40
05:40
, ,

1 komentar:

  1. Unknown2 September 2018 at 23:01

    To find a greater exposure for your facebook account, Persons expend bucks to Buy Facebook Followers to very easily obtain exposure online. buy followers for facebook

    ReplyDelete

Subscribe to: Post Comments (Atom)
 
Top