diff --git a/lib/ui/css/media.scss b/lib/ui/css/media.scss
index d2a94b2..5f2dad4 100644
--- a/lib/ui/css/media.scss
+++ b/lib/ui/css/media.scss
@@ -158,7 +158,17 @@
             padding: 4px 0;
             cursor: pointer;
 
+            >.seek-buffers {
+                position: absolute;
+                width: 100%;
+
+                >.ui-video-buffer {
+                    background-color: #adadad;
+                }
+            }
+
             >.ui-video-duration,
+            >.seek-buffers>.ui-video-buffer,
             >.ui-video-progress {
                 position: absolute;
                 border-radius: 2px;
@@ -168,7 +178,7 @@
 
             >.ui-video-duration {
                 width: 100%;
-                background-color: #bbb;
+                background-color: #4e4e4e;
             }
 
             >.ui-video-progress {
@@ -179,10 +189,10 @@
                     content: '\a0';
                     position: absolute;
                     right: -6px;
-                    top: -6px;
-                    width: 13px;
-                    height: 13px;
-                    border-radius: 6px;
+                    top: -5px;
+                    width: 14px;
+                    height: 14px;
+                    border-radius: 7px;
                     background-color: #fff;
                 }
             }
diff --git a/lib/ui/media.js b/lib/ui/media.js
index 4e9a0dc..d479559 100644
--- a/lib/ui/media.js
+++ b/lib/ui/media.js
@@ -167,6 +167,7 @@ export function createVideoList(urls, options, callback) {
     }
     const length = urls.length;
     const container = createElement('div', 'ui-media-video-container');
+    let seekBufferBar;
     let seekProgressBar;
     let playIcon;
     let timeLabel;
@@ -219,6 +220,7 @@ export function createVideoList(urls, options, callback) {
             });
         },
             createElement('div', 'ui-video-duration seek-duration'),
+            seekBufferBar = createElement('div', 'seek-buffers'),
             seekProgressBar = createElement('div', 'ui-video-progress seek-progress')
         ),
         playIcon = createElement('div', 'ui-video-icon play-icon',
@@ -355,6 +357,22 @@ export function createVideoList(urls, options, callback) {
                 }
             }
         });
+        video.addEventListener('progress', () => {
+            const buffered = video.buffered;
+            for (let i = 0; i < buffered.length; i += 1) {
+                let buffer = seekBufferBar.children[i];
+                if (buffer == null) {
+                    seekBufferBar.append(buffer = createElement('div', 'ui-video-buffer'));
+                }
+                const start = buffered.start(i) * 100 / duration;
+                const end = buffered.end(i) * 100 / duration;
+                buffer.style.left = `${start.toFixed(2)}%`;
+                buffer.style.width = `${(end - start).toFixed(2)}%`;
+            }
+            for (let i = seekBufferBar.children.length - 1; i >= buffered.length; i -= 1) {
+                seekBufferBar.children[i].remove();
+            }
+        });
         video.addEventListener('canplaythrough', () => {
             const w = video.parentElement.querySelector('.ui-video-waiting');
             if (w != null) {