fork download
copy 
  1. <div class="progress-bar> 
  2.  <div class="progress" style="width: 75%:"> 
  3.    <dv Claas="progress-text>Almost complete…</div>
  4. </div> 
  5. <dlv class=”stripes></div>  
  6. </div>
  7.  
  8.  
  9.  
  10. <style>
  11.   progress-bar {
  12.  
  13.  
  14. position: relative;
  15. width: 100%;
  16. height: 30px;
  17. background-color: white;
  18. overflow: hidden;
  19. }
  20.  
  21.  
  22. .progress {
  23.    position: absolute; 
  24.    top: 0;
  25.    left: 0; 
  26.    height: 100%; 
  27.    background-color. #9A36F1: 
  28.    width: 75%; 
  29.    display flex; 
  30.    align-items: center;
  31.    Justify-content: center; 
  32.    color: #fff;
  33.    font-size:  14px;   
  34.    font-weight: bold;
  35.    text-shadow. 1px 1px 1px rgba(0. 0. 0. 0.3); 
  36.   }
  37.  
  38.  
  39.  .Progress-text { 
  40.     text-align: center;
  41.     color: white;
  42.   }
  43.  
  44. .stripes { 
  45.   position: absolute; 
  46.   top: 0; 
  47.   left: 0;
  48.   height: 100%;
  49.   width: 75%;
  50.   background: repeating-linear-gradient{
  51.     -45deg,
  52.     rgba(169,84,243,0.5), 
  53.     rgba(169,84,243:0.5) 10px,
  54.     rgba(255,255,255,0.5) 10px,
  55.     rgba(255.255,255,0.5) 20px,
  56. }: 
  57. background-size: 28px 28px; 
  58. animaton: animate-stripes 1s linear infinite; 
  59. }
  60.  
  61.  
  62.  
  63. @keyframes animate-stripes {
  64.   0% {
  65.     background-position: 0 0;
  66.  }
  67. 100% {
  68.     background-position: 28px 0;
  69.  }
  70. }
  71.  
  72.  
  73. </style>
  74.  
Success #stdin #stdout 0.02s 25792KB
comments (?)
stdin
copy 
Standard input is empty
stdout
copy 
<div class="progress-bar> 
 <div class="progress" style="width: 75%:"> 
   <dv Claas="progress-text>Almost complete…</div>
</div> 
<dlv class=”stripes></div>  
</div>



<style>
  progress-bar {


position: relative;
width: 100%;
height: 30px;
background-color: white;
overflow: hidden;
}


.progress {
   position: absolute; 
   top: 0;
   left: 0; 
   height: 100%; 
   background-color. #9A36F1: 
   width: 75%; 
   display flex; 
   align-items: center;
   Justify-content: center; 
   color: #fff;
   font-size:  14px;   
   font-weight: bold;
   text-shadow. 1px 1px 1px rgba(0. 0. 0. 0.3); 
  }


 .Progress-text { 
    text-align: center;
    color: white;
  }

.stripes { 
  position: absolute; 
  top: 0; 
  left: 0;
  height: 100%;
  width: 75%;
  background: repeating-linear-gradient{
    -45deg,
    rgba(169,84,243,0.5), 
    rgba(169,84,243:0.5) 10px,
    rgba(255,255,255,0.5) 10px,
    rgba(255.255,255,0.5) 20px,
}: 
background-size: 28px 28px; 
animaton: animate-stripes 1s linear infinite; 
}



@keyframes animate-stripes {
  0% {
    background-position: 0 0;
 }
100% {
    background-position: 28px 0;
 }
}


</style>
https://ideone.com/HTDKv4
language:
PHP (php 7.3.5)
created:
2 days ago
visibility:
public

Share or Embed source code

Discover > Sphere Engine API

The brand new service which powers Ideone!

Discover > IDE Widget

Widget for compiling and running the source code in a web browser!