{"id":1395,"date":"2021-10-22T17:11:26","date_gmt":"2021-10-22T10:11:26","guid":{"rendered":"https:\/\/www.yellowweb.id\/blog\/?p=1395"},"modified":"2021-10-22T17:11:31","modified_gmt":"2021-10-22T10:11:31","slug":"progress-bar-bootstrap-jquery","status":"publish","type":"post","link":"https:\/\/www.yellowweb.id\/blog\/progress-bar-bootstrap-jquery\/","title":{"rendered":"Progress Bar Bootstrap &#038; jQuery"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Pada artikel kali ini akan membahas seputar progress bar dengan menggunakan Bootstrap dan jQuery.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p class=\"wp-block-paragraph\">Pembahasan terkait dengan progress bar dengan menggunakan JavaScript macamnya sangat beragam, pada tulisan kali ini akan diperlihatkan secara sederhana, bagaimana cara mengaktifkan fitur progress bar yang ada di Bootstrap dengan menggunakan jQuery.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">file index.html<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!doctype html>\r\n&lt;html lang=\"en\">\r\n  &lt;head>\r\n    &lt;!-- Required meta tags -->\r\n    &lt;meta charset=\"utf-8\">\r\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\r\n\r\n    &lt;!-- Bootstrap CSS -->\r\n    &lt;link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.2\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-EVSTQN3\/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC\" crossorigin=\"anonymous\">\r\n\r\n    &lt;title>Progress Bar with JavaScript&lt;\/title>\r\n    &lt;style type=\"text\/css\">\r\n      body{\r\n        padding: 20px;\r\n      }\r\n    &lt;\/style>\r\n  &lt;\/head>\r\n  &lt;body>\r\n\r\n    &lt;div class=\"container\">\r\n      &lt;div class=\"progress\">\r\n        &lt;div class=\"progress-bar\" role=\"progressbar\" aria-valuenow=\"0\" aria-valuemin=\"0\" aria-valuemax=\"100\" style=\"width: 0%;\">&lt;\/div>\r\n      &lt;\/div>\r\n    &lt;\/div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n    &lt;!-- jQuery Library -->\r\n    &lt;script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.6.0\/jquery.min.js\">&lt;\/script>\r\n\r\n    &lt;!-- Optional JavaScript; choose one of the two! -->\r\n\r\n    &lt;!-- Option 1: Bootstrap Bundle with Popper -->\r\n    &lt;script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.2\/dist\/js\/bootstrap.bundle.min.js\" integrity=\"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn\/tWtIaxVXM\" crossorigin=\"anonymous\">&lt;\/script>\r\n\r\n    &lt;!-- Option 2: Separate Popper and Bootstrap JS -->\r\n    &lt;!--\r\n    &lt;script src=\"https:\/\/cdn.jsdelivr.net\/npm\/@popperjs\/core@2.9.2\/dist\/umd\/popper.min.js\" integrity=\"sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p\" crossorigin=\"anonymous\">&lt;\/script>\r\n    &lt;script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.2\/dist\/js\/bootstrap.min.js\" integrity=\"sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz\/bgldoEyl4H0zUF0QKbrJ0EcQF\" crossorigin=\"anonymous\">&lt;\/script>\r\n\r\n    -->\r\n\r\n\r\n    &lt;script type=\"text\/javascript\">\r\n      var prosesBar = $('.progress-bar');\r\n      var prosesAngka = 0;\r\n\r\n      setInterval(function(){\r\n        prosesAngka++;\r\n        prosesBar.css('width', prosesAngka + '%');\r\n        prosesBar.attr('aria-valuenow', prosesAngka);\r\n      }, 100);\r\n    &lt;\/script>\r\n\r\n\r\n  &lt;\/body>\r\n&lt;\/html><\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">kode skrip diatas disana secara keseluruhan sudah terdapat skrip css, dan template default dari Bootstrap serta disini untuk fitur interaktif disini menggunakan jQuery libray, jadi pastikan unduh untuk file jQuery tersebut.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Progress bar yang dibuat untuk artikel yang sedang dibuat tidak menggunakan event, jadi otomatis pada saat halaman web dibuka maka akan dijalankan, silahkan kalian coba dengan menambahkan event atau perintah lainnya.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Hasil jadi dapat langsung dilihat disini:<\/p>\n\n\n\n<iframe loading=\"lazy\" width=\"100%\" height=\"300\" src=\"\/\/jsfiddle.net\/miftahfs\/gtma0u4y\/3\/embedded\/\" allowfullscreen=\"allowfullscreen\" allowpaymentrequest frameborder=\"0\"><\/iframe>\n","protected":false},"excerpt":{"rendered":"<p>Pada artikel kali ini akan membahas seputar progress bar dengan menggunakan Bootstrap dan jQuery.<\/p>\n","protected":false},"author":1,"featured_media":1398,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[155,116],"tags":[566,565,18,564],"class_list":["post-1395","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-bootstrap","category-jquery","tag-cdn","tag-event","tag-jquery","tag-progress-bar"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.7 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Progress Bar Bootstrap &amp; jQuery - YELLOWWEB.ID<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.yellowweb.id\/blog\/progress-bar-bootstrap-jquery\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Progress Bar Bootstrap &amp; jQuery - YELLOWWEB.ID\" \/>\n<meta property=\"og:description\" content=\"Pada artikel kali ini akan membahas seputar progress bar dengan menggunakan Bootstrap dan jQuery.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.yellowweb.id\/blog\/progress-bar-bootstrap-jquery\/\" \/>\n<meta property=\"og:site_name\" content=\"YELLOWWEB.ID\" \/>\n<meta property=\"article:published_time\" content=\"2021-10-22T10:11:26+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-10-22T10:11:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/i0.wp.com\/www.yellowweb.id\/blog\/wp-content\/uploads\/2021\/10\/progressbar.jpg?fit=1200%2C628&ssl=1\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"yellowweb\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"yellowweb\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/progress-bar-bootstrap-jquery\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/progress-bar-bootstrap-jquery\\\/\"},\"author\":{\"name\":\"yellowweb\",\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/#\\\/schema\\\/person\\\/75188044e080844724e381ab6a5b9829\"},\"headline\":\"Progress Bar Bootstrap &#038; jQuery\",\"datePublished\":\"2021-10-22T10:11:26+00:00\",\"dateModified\":\"2021-10-22T10:11:31+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/progress-bar-bootstrap-jquery\\\/\"},\"wordCount\":121,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/progress-bar-bootstrap-jquery\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/10\\\/progressbar.jpg\",\"keywords\":[\"cdn\",\"event\",\"jquery\",\"progress-bar\"],\"articleSection\":[\"Bootstrap\",\"jQuery\"],\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/progress-bar-bootstrap-jquery\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/progress-bar-bootstrap-jquery\\\/\",\"url\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/progress-bar-bootstrap-jquery\\\/\",\"name\":\"Progress Bar Bootstrap & jQuery - YELLOWWEB.ID\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/progress-bar-bootstrap-jquery\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/progress-bar-bootstrap-jquery\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/10\\\/progressbar.jpg\",\"datePublished\":\"2021-10-22T10:11:26+00:00\",\"dateModified\":\"2021-10-22T10:11:31+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/#\\\/schema\\\/person\\\/75188044e080844724e381ab6a5b9829\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/progress-bar-bootstrap-jquery\\\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/progress-bar-bootstrap-jquery\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/progress-bar-bootstrap-jquery\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/10\\\/progressbar.jpg\",\"contentUrl\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/10\\\/progressbar.jpg\",\"width\":1200,\"height\":628},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/progress-bar-bootstrap-jquery\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Progress Bar Bootstrap &#038; jQuery\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/\",\"name\":\"YELLOWWEB.ID\",\"description\":\"Kursus Web Design | Kursus Web Programming | Mobile Web Apps | Digital Marketing\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/#\\\/schema\\\/person\\\/75188044e080844724e381ab6a5b9829\",\"name\":\"yellowweb\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5afd1bfac26e9377e8f5e36afb624cf3690dd31cb07c3961dfbc736b9ff1912f?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5afd1bfac26e9377e8f5e36afb624cf3690dd31cb07c3961dfbc736b9ff1912f?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5afd1bfac26e9377e8f5e36afb624cf3690dd31cb07c3961dfbc736b9ff1912f?s=96&d=mm&r=g\",\"caption\":\"yellowweb\"},\"sameAs\":[\"https:\\\/\\\/www.yellowweb.id\"],\"url\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/author\\\/yellowweb\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Progress Bar Bootstrap & jQuery - YELLOWWEB.ID","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.yellowweb.id\/blog\/progress-bar-bootstrap-jquery\/","og_locale":"en_GB","og_type":"article","og_title":"Progress Bar Bootstrap & jQuery - YELLOWWEB.ID","og_description":"Pada artikel kali ini akan membahas seputar progress bar dengan menggunakan Bootstrap dan jQuery.","og_url":"https:\/\/www.yellowweb.id\/blog\/progress-bar-bootstrap-jquery\/","og_site_name":"YELLOWWEB.ID","article_published_time":"2021-10-22T10:11:26+00:00","article_modified_time":"2021-10-22T10:11:31+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/i0.wp.com\/www.yellowweb.id\/blog\/wp-content\/uploads\/2021\/10\/progressbar.jpg?fit=1200%2C628&ssl=1","type":"image\/jpeg"}],"author":"yellowweb","twitter_card":"summary_large_image","twitter_misc":{"Written by":"yellowweb","Estimated reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.yellowweb.id\/blog\/progress-bar-bootstrap-jquery\/#article","isPartOf":{"@id":"https:\/\/www.yellowweb.id\/blog\/progress-bar-bootstrap-jquery\/"},"author":{"name":"yellowweb","@id":"https:\/\/www.yellowweb.id\/blog\/#\/schema\/person\/75188044e080844724e381ab6a5b9829"},"headline":"Progress Bar Bootstrap &#038; jQuery","datePublished":"2021-10-22T10:11:26+00:00","dateModified":"2021-10-22T10:11:31+00:00","mainEntityOfPage":{"@id":"https:\/\/www.yellowweb.id\/blog\/progress-bar-bootstrap-jquery\/"},"wordCount":121,"commentCount":0,"image":{"@id":"https:\/\/www.yellowweb.id\/blog\/progress-bar-bootstrap-jquery\/#primaryimage"},"thumbnailUrl":"https:\/\/www.yellowweb.id\/blog\/wp-content\/uploads\/2021\/10\/progressbar.jpg","keywords":["cdn","event","jquery","progress-bar"],"articleSection":["Bootstrap","jQuery"],"inLanguage":"en-GB","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.yellowweb.id\/blog\/progress-bar-bootstrap-jquery\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.yellowweb.id\/blog\/progress-bar-bootstrap-jquery\/","url":"https:\/\/www.yellowweb.id\/blog\/progress-bar-bootstrap-jquery\/","name":"Progress Bar Bootstrap & jQuery - YELLOWWEB.ID","isPartOf":{"@id":"https:\/\/www.yellowweb.id\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.yellowweb.id\/blog\/progress-bar-bootstrap-jquery\/#primaryimage"},"image":{"@id":"https:\/\/www.yellowweb.id\/blog\/progress-bar-bootstrap-jquery\/#primaryimage"},"thumbnailUrl":"https:\/\/www.yellowweb.id\/blog\/wp-content\/uploads\/2021\/10\/progressbar.jpg","datePublished":"2021-10-22T10:11:26+00:00","dateModified":"2021-10-22T10:11:31+00:00","author":{"@id":"https:\/\/www.yellowweb.id\/blog\/#\/schema\/person\/75188044e080844724e381ab6a5b9829"},"breadcrumb":{"@id":"https:\/\/www.yellowweb.id\/blog\/progress-bar-bootstrap-jquery\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.yellowweb.id\/blog\/progress-bar-bootstrap-jquery\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/www.yellowweb.id\/blog\/progress-bar-bootstrap-jquery\/#primaryimage","url":"https:\/\/www.yellowweb.id\/blog\/wp-content\/uploads\/2021\/10\/progressbar.jpg","contentUrl":"https:\/\/www.yellowweb.id\/blog\/wp-content\/uploads\/2021\/10\/progressbar.jpg","width":1200,"height":628},{"@type":"BreadcrumbList","@id":"https:\/\/www.yellowweb.id\/blog\/progress-bar-bootstrap-jquery\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.yellowweb.id\/blog\/"},{"@type":"ListItem","position":2,"name":"Progress Bar Bootstrap &#038; jQuery"}]},{"@type":"WebSite","@id":"https:\/\/www.yellowweb.id\/blog\/#website","url":"https:\/\/www.yellowweb.id\/blog\/","name":"YELLOWWEB.ID","description":"Kursus Web Design | Kursus Web Programming | Mobile Web Apps | Digital Marketing","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.yellowweb.id\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Person","@id":"https:\/\/www.yellowweb.id\/blog\/#\/schema\/person\/75188044e080844724e381ab6a5b9829","name":"yellowweb","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/secure.gravatar.com\/avatar\/5afd1bfac26e9377e8f5e36afb624cf3690dd31cb07c3961dfbc736b9ff1912f?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/5afd1bfac26e9377e8f5e36afb624cf3690dd31cb07c3961dfbc736b9ff1912f?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5afd1bfac26e9377e8f5e36afb624cf3690dd31cb07c3961dfbc736b9ff1912f?s=96&d=mm&r=g","caption":"yellowweb"},"sameAs":["https:\/\/www.yellowweb.id"],"url":"https:\/\/www.yellowweb.id\/blog\/author\/yellowweb\/"}]}},"_links":{"self":[{"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/posts\/1395","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/comments?post=1395"}],"version-history":[{"count":2,"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/posts\/1395\/revisions"}],"predecessor-version":[{"id":1397,"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/posts\/1395\/revisions\/1397"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/media\/1398"}],"wp:attachment":[{"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/media?parent=1395"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/categories?post=1395"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/tags?post=1395"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}