SHARE
TWEET

Untitled

a guest Jul 17th, 2017 45 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. .terra-ProgressGroup {
  2.   flex: auto;
  3.   display: flex;
  4.   background: #d3d4d5;
  5.   flex-direction: row;
  6.   border-radius: 0.5em;
  7.   overflow: auto;
  8.   animation-delay: 3s;  
  9. }
  10.  
  11. .terra-ProgressGroup div {
  12.   transform: translateX(-100%);
  13.   animation: loadbar 3s forwards;
  14.   -webkit-animation: loadbar 3s forwards;
  15.   opacity: 0;
  16. }
  17.  
  18. @keyframes loadbar {
  19.   0% {
  20.     opacity: 1;
  21.   }
  22.   100% {
  23.     transform: translateX(0);
  24.     opacity: 1;
  25.   }
  26. }
  27.  
  28. .terra-ProgressGroup--progress {
  29.   // flex: 1 1 auto;
  30.   border-radius: 0em;
  31.   padding-right: 1px;
  32.   animation-delay: 3s;
  33.   // background-color: #ffffff;
  34. }
  35.  
  36. .terra-ProgressGroup--progress:not(:first-child){
  37.   // background-color: #ffffff;
  38.   // padding-right: 1px;
  39. }
  40.    
  41. const ProgressBar = (props, {...customProps}) => {
  42.  
  43.     const classes = classNames([
  44.         { [`terra-ProgressBar--${props.heightSize}`]: props.heightSize },
  45.         customProps.className,
  46.     ]);
  47.     const GroupProgressBar = [];
  48.     props.groups.map((group, i) => {
  49.  
  50.         const widthValue = (group.value / group.max) * 100;
  51.  
  52.         GroupProgressBar.push
  53.  
  54.         (<div style={{width: `${widthValue}%`,
  55.             height: '50px',}}
  56.       key = {i}
  57.       className={`well-background--${group.concept}`}>
  58.         </div>);
  59.     })
  60.     // console.log(GroupProgressBar);
  61.     return <div className='terra-ProgressGroup'> {GroupProgressBar} </div>
  62. }
RAW Paste Data
Pastebin PRO Summer Special!
Get 60% OFF on Pastebin PRO accounts!
Top