metalx1000

HTML CSS Progressbars

Dec 20th, 2020
1,184
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <title></title>
  5.     <meta charset="utf-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <style>
  8.  
  9.       @media only screen and (min-width: 600px) {
  10.         body {
  11.           margin-right:100px;
  12.           margin-left:100px;
  13.           margin-top: 0;
  14.         }
  15.       }
  16.       .flex{
  17.         display: grid;
  18.         grid-row-gap: 1rem;
  19.         grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  20.       }
  21.       .progress-bar {
  22.         background-color: #aaaaaa;
  23.         height: 25px;
  24.         padding: 5px;
  25.         margin: 10px 0;
  26.         border-radius: 5px;
  27.         box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;
  28.       }
  29.  
  30.       .progress-bar span {
  31.         display: inline-block;
  32.         height: 100%;
  33.         border-radius: 3px;
  34.         box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
  35.         transition: width .4s ease-in-out;
  36.       }
  37.  
  38.       .blue span {
  39.         background-color: #34c2e3;
  40.       }
  41.  
  42.       .red span {
  43.         background-color: #f22222;
  44.         background-image: linear-gradient(top, #fecf23, #fd9215);
  45.       }
  46.  
  47.       .orange span {
  48.         background-color: #fecf23;
  49.         background-image: linear-gradient(top, #fecf23, #fd9215);
  50.       }
  51.  
  52.       .green span {
  53.         background-color: #a5df41;
  54.         background-image: linear-gradient(top, #a5df41, #4ca916);
  55.       }
  56.       .stripes span {
  57.         background-size: 30px 30px;
  58.         background-image: linear-gradient(135deg, rgba(255, 255, 255, .15) 25%,
  59.         transparent 25%,
  60.         transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
  61.         transparent 75%, transparent);
  62.         animation: animate-stripes 3s linear infinite;
  63.       }
  64.  
  65.       @keyframes animate-stripes {
  66.         0% {
  67.           background-position: 0 0;
  68.         }
  69.         100% {
  70.           background-position: 60px 0;
  71.         }
  72.       }
  73.  
  74.     </style>
  75.     <script>
  76.       document.addEventListener("DOMContentLoaded", function(){
  77.         create_bar("40","green");
  78.         create_bar("60","green");
  79.         create_bar("80","blue");
  80.         create_bar("5","red");
  81.  
  82.         setInterval(function(){
  83.           var div = document.getElementsByClassName("progress-bar");
  84.           for(d of div){
  85.             var num = Math.floor(Math.random() * 100);
  86.             d.children[0].style.width=num+"%";
  87.             d.children[0].innerHTML=num+"%";
  88.           }
  89.         },2000);
  90.       });
  91.  
  92.       function create_bar(percent,color){
  93.         var bar=`<div class="progress-bar stripes `+color+`">
  94.           <span style="width: `+percent+`%">`+percent+`%</span>
  95.         </div>`;
  96.  
  97.         document.getElementById("charts").innerHTML += bar;
  98.       }
  99.  
  100.  
  101.     </script>
  102.   </head>
  103.   <body>
  104.     <div style="text-align:center"><h1>My Charts</h1></div>
  105.     <div id="charts"></div>
  106.   </body>
  107. </html>
  108.  
  109.  
RAW Paste Data