Skip to content

Instantly share code, notes, and snippets.

@iamabhishekgarg

iamabhishekgarg/css-progress-bar-design.markdown

Created September 18, 2022 08:53
Show Gist options
  • Save iamabhishekgarg/3b2bd60870eb5b1a0cad4e6ac9f921d1 to your computer and use it in GitHub Desktop.
Save iamabhishekgarg/3b2bd60870eb5b1a0cad4e6ac9f921d1 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. iamabhishekgarg created this gist Sep 18, 2022.
    7 changes: 7 additions & 0 deletions css-progress-bar-design.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    CSS-Progress-Bar-design
    ------------------------


    A [Pen](https://codepen.io/abhishekgarg97/pen/ZEoKERP) by [Abhishek Garg](https://codepen.io/abhishekgarg97) on [CodePen](https://codepen.io).

    [License](https://codepen.io/license/pen/ZEoKERP).
    32 changes: 32 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,32 @@
    <div class="container">

    <h1>Some different progress bars</h1>

    <div class="progress" id="progress_0">
    <h6>Pizza</h6>
    <div class="progress-bar">
    <div class="progressing"></div>
    <span class="circle"></span>
    </div>
    <p class="percent">0%</p>
    </div>

    <div class="progress" id="progress_1">
    <h6>Coffee</h6>
    <div class="progress-bar">
    <div class="progressing"></div>
    <span class="circle"></span>
    </div>
    <p class="percent">0%</p>
    </div>

    <div class="progress" id="progress_2">
    <h6>Sandwich</h6>
    <div class="progress-bar">
    <div class="progressing"></div>
    <span class="circle"></span>
    </div>
    <p class="percent">0%</p>
    </div>

    </div>
    26 changes: 26 additions & 0 deletions script.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,26 @@
    function start(i) {

    var percent = document.querySelector(`#progress_${i} .percent`);
    var progressing = document.querySelector(`#progress_${i} .progressing`);
    var circle = document.querySelector(`#progress_${i} .circle`);

    requestAnimationFrame(startProgress);

    var progress = 0;
    var random = parseInt(Math.random() * 100);

    function startProgress() {
    progress += 1;
    if (progress <= random) {
    percent.innerHTML = parseInt(progress) + '%';
    progressing.style.width = progress + '%';
    circle.style.left = progress + '%';
    }
    requestAnimationFrame(startProgress);
    }

    }

    for (var i = 0; i < 3; i++) {
    start(i);
    }
    75 changes: 75 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,75 @@
    * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
    }

    body {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(45deg, #40a8ee 50%, #199cf3 50%);
    }

    .container {
    position: relative;
    background: #ffffff;
    border-radius: 30px;
    width: 700px;
    height: 340px;
    padding: 30px;
    text-align: center;
    box-shadow: 1px 2px 10px rgba(0, 0, 0, .1);
    }

    .container h1 {
    letter-spacing: 1px;
    }

    .container .progress {
    display: flex;
    width: 100%;
    margin: 50px auto;
    }

    .progress h6 {
    margin-top: -6px;
    font-size: 18px;
    letter-spacing: 1px;
    }

    .progress .progress-bar {
    position: absolute;
    left: 150px;
    width: 60%;
    height: 15px;
    border-radius: 30px;
    background: #e2e2e2;
    }

    .progress .progress-bar .progressing {
    width: 0;
    height: 100%;
    background: #ff0055;
    border-radius: 30px;
    }

    .progress .progress-bar .circle {
    position: absolute;
    left: 0;
    width: 25px;
    height: 25px;
    background: #ffffff;
    border: 6px solid #ff0055;
    border-radius: 50%;
    transform: translateY(-20px) translateX(-10px);
    }

    .progress .percent {
    position: absolute;
    right: 40px;
    margin-top: -12px;
    font-size: 24px;
    }