ant-design-vue/components/progress/__tests__/__snapshots__/demo.test.js.snap

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`renders ./components/progress/demo/circle.md correctly 1`] = `
<div>
  <div class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default">
    <div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24px;"><svg viewBox="0 0 100 100" class="ant-progress-circle">
        <path d="M 50,50 m 0,-47
       a 47,47 0 1 1 0,94
       a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #108ee9; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px;"></path>
        <path d="M 50,50 m 0,-47
       a 47,47 0 1 1 0,94
       a 47,47 0 1 1 0,-94" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #108ee9; stroke-dasharray: 221.48228207808043px 295.3097094374406px; stroke-dashoffset: -0px;"></path>
      </svg><span class="ant-progress-text">75%</span></div>
  </div>
  <div class="ant-progress ant-progress-circle ant-progress-status-exception ant-progress-show-info ant-progress-default">
    <div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24px;"><svg viewBox="0 0 100 100" class="ant-progress-circle">
        <path d="M 50,50 m 0,-47
       a 47,47 0 1 1 0,94
       a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #ff5500; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px;"></path>
        <path d="M 50,50 m 0,-47
       a 47,47 0 1 1 0,94
       a 47,47 0 1 1 0,-94" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #ff5500; stroke-dasharray: 206.7167966062084px 295.3097094374406px; stroke-dashoffset: -0px;"></path>
      </svg><span class="ant-progress-text"><i class="anticon anticon-cross"><svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></i></span></div>
  </div>
  <div class="ant-progress ant-progress-circle ant-progress-status-success ant-progress-show-info ant-progress-default">
    <div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24px;"><svg viewBox="0 0 100 100" class="ant-progress-circle">
        <path d="M 50,50 m 0,-47
       a 47,47 0 1 1 0,94
       a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #87d068; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px;"></path>
        <path d="M 50,50 m 0,-47
       a 47,47 0 1 1 0,94
       a 47,47 0 1 1 0,-94" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #87d068; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px;"></path>
      </svg><span class="ant-progress-text"><i class="anticon anticon-check"><svg viewBox="64 64 896 896" data-icon="check" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"></path></svg></i></span></div>
  </div>
</div>
`;

exports[`renders ./components/progress/demo/circle-dynamic.md correctly 1`] = `
<div>
  <div class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default">
    <div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24px;"><svg viewBox="0 0 100 100" class="ant-progress-circle">
        <path d="M 50,50 m 0,-47
       a 47,47 0 1 1 0,94
       a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #108ee9; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px;"></path>
      </svg><span class="ant-progress-text">0%</span></div>
  </div>
  <div class="ant-btn-group"><button type="button" class="ant-btn ant-btn-default"><i class="anticon anticon-minus"><svg viewBox="64 64 896 896" data-icon="minus" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
          <path d="M872 474H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h720c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z"></path>
        </svg></i></button><button type="button" class="ant-btn ant-btn-default"><i class="anticon anticon-plus"><svg viewBox="64 64 896 896" data-icon="plus" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
          <path d="M848 474H550V152h-76v322H176c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h298v322h76V550h298c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z"></path>
        </svg></i></button></div>
</div>
`;

exports[`renders ./components/progress/demo/circle-mini.md correctly 1`] = `
<div>
  <div class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default">
    <div class="ant-progress-inner" style="width: 80px; height: 80px; font-size: 18px;"><svg viewBox="0 0 100 100" class="ant-progress-circle">
        <path d="M 50,50 m 0,-47
       a 47,47 0 1 1 0,94
       a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #108ee9; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px;"></path>
        <path d="M 50,50 m 0,-47
       a 47,47 0 1 1 0,94
       a 47,47 0 1 1 0,-94" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #108ee9; stroke-dasharray: 88.59291283123217px 295.3097094374406px; stroke-dashoffset: -0px;"></path>
      </svg><span class="ant-progress-text">30%</span></div>
  </div>
  <div class="ant-progress ant-progress-circle ant-progress-status-exception ant-progress-show-info ant-progress-default">
    <div class="ant-progress-inner" style="width: 80px; height: 80px; font-size: 18px;"><svg viewBox="0 0 100 100" class="ant-progress-circle">
        <path d="M 50,50 m 0,-47
       a 47,47 0 1 1 0,94
       a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #ff5500; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px;"></path>
        <path d="M 50,50 m 0,-47
       a 47,47 0 1 1 0,94
       a 47,47 0 1 1 0,-94" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #ff5500; stroke-dasharray: 206.7167966062084px 295.3097094374406px; stroke-dashoffset: -0px;"></path>
      </svg><span class="ant-progress-text"><i class="anticon anticon-cross"><svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></i></span></div>
  </div>
  <div class="ant-progress ant-progress-circle ant-progress-status-success ant-progress-show-info ant-progress-default">
    <div class="ant-progress-inner" style="width: 80px; height: 80px; font-size: 18px;"><svg viewBox="0 0 100 100" class="ant-progress-circle">
        <path d="M 50,50 m 0,-47
       a 47,47 0 1 1 0,94
       a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #87d068; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px;"></path>
        <path d="M 50,50 m 0,-47
       a 47,47 0 1 1 0,94
       a 47,47 0 1 1 0,-94" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #87d068; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px;"></path>
      </svg><span class="ant-progress-text"><i class="anticon anticon-check"><svg viewBox="64 64 896 896" data-icon="check" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"></path></svg></i></span></div>
  </div>
</div>
`;

exports[`renders ./components/progress/demo/dashboard.md correctly 1`] = `
<div>
  <div class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default">
    <div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24px;"><svg viewBox="0 0 100 100" class="ant-progress-circle">
        <path d="M 50,50 m 0,47
       a 47,47 0 1 1 0,-94
       a 47,47 0 1 1 0,94" stroke="#f3f3f3" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #108ee9; stroke-dasharray: 220.30970943744057px 295.3097094374406px; stroke-dashoffset: -37.5px;"></path>
        <path d="M 50,50 m 0,47
       a 47,47 0 1 1 0,-94
       a 47,47 0 1 1 0,94" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #108ee9; stroke-dasharray: 165.23228207808043px 295.3097094374406px; stroke-dashoffset: -37.5px;"></path>
      </svg><span class="ant-progress-text">75%</span></div>
  </div>
</div>
`;

exports[`renders ./components/progress/demo/dynamic.md correctly 1`] = `
<div>
  <div class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default">
    <div>
      <div class="ant-progress-outer">
        <div class="ant-progress-inner">
          <div class="ant-progress-bg" style="width: 0%; height: 8px; border-radius: 100px;"></div>
        </div>
      </div><span class="ant-progress-text">0%</span>
    </div>
  </div>
  <div class="ant-btn-group"><button type="button" class="ant-btn ant-btn-default"><i class="anticon anticon-minus"><svg viewBox="64 64 896 896" data-icon="minus" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
          <path d="M872 474H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h720c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z"></path>
        </svg></i></button><button type="button" class="ant-btn ant-btn-default"><i class="anticon anticon-plus"><svg viewBox="64 64 896 896" data-icon="plus" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
          <path d="M848 474H550V152h-76v322H176c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h298v322h76V550h298c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z"></path>
        </svg></i></button></div>
</div>
`;

exports[`renders ./components/progress/demo/format.md correctly 1`] = `
<div>
  <div class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default">
    <div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24px;"><svg viewBox="0 0 100 100" class="ant-progress-circle">
        <path d="M 50,50 m 0,-47
       a 47,47 0 1 1 0,94
       a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #108ee9; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px;"></path>
        <path d="M 50,50 m 0,-47
       a 47,47 0 1 1 0,94
       a 47,47 0 1 1 0,-94" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #108ee9; stroke-dasharray: 221.48228207808043px 295.3097094374406px; stroke-dashoffset: -0px;"></path>
      </svg><span class="ant-progress-text">75 Days</span></div>
  </div>
  <div class="ant-progress ant-progress-circle ant-progress-status-success ant-progress-show-info ant-progress-default">
    <div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24px;"><svg viewBox="0 0 100 100" class="ant-progress-circle">
        <path d="M 50,50 m 0,-47
       a 47,47 0 1 1 0,94
       a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #87d068; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px;"></path>
        <path d="M 50,50 m 0,-47
       a 47,47 0 1 1 0,94
       a 47,47 0 1 1 0,-94" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #87d068; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px;"></path>
      </svg><span class="ant-progress-text">Done</span></div>
  </div>
</div>
`;

exports[`renders ./components/progress/demo/line.md correctly 1`] = `
<div>
  <div class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default">
    <div>
      <div class="ant-progress-outer">
        <div class="ant-progress-inner">
          <div class="ant-progress-bg" style="width: 30%; height: 8px; border-radius: 100px;"></div>
        </div>
      </div><span class="ant-progress-text">30%</span>
    </div>
  </div>
  <div class="ant-progress ant-progress-line ant-progress-status-active ant-progress-show-info ant-progress-default">
    <div>
      <div class="ant-progress-outer">
        <div class="ant-progress-inner">
          <div class="ant-progress-bg" style="width: 50%; height: 8px; border-radius: 100px;"></div>
        </div>
      </div><span class="ant-progress-text">50%</span>
    </div>
  </div>
  <div class="ant-progress ant-progress-line ant-progress-status-exception ant-progress-show-info ant-progress-default">
    <div>
      <div class="ant-progress-outer">
        <div class="ant-progress-inner">
          <div class="ant-progress-bg" style="width: 70%; height: 8px; border-radius: 100px;"></div>
        </div>
      </div><span class="ant-progress-text"><i class="anticon anticon-cross-circle"><!----></i></span>
    </div>
  </div>
  <div class="ant-progress ant-progress-line ant-progress-status-success ant-progress-show-info ant-progress-default">
    <div>
      <div class="ant-progress-outer">
        <div class="ant-progress-inner">
          <div class="ant-progress-bg" style="width: 100%; height: 8px; border-radius: 100px;"></div>
        </div>
      </div><span class="ant-progress-text"><i class="anticon anticon-check-circle"><svg viewBox="64 64 896 896" data-icon="check-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M699 353h-46.9c-10.2 0-19.9 4.9-25.9 13.3L469 584.3l-71.2-98.8c-6-8.3-15.6-13.3-25.9-13.3H325c-6.5 0-10.3 7.4-6.5 12.7l124.6 172.8a31.8 31.8 0 0 0 51.7 0l210.6-292c3.9-5.3.1-12.7-6.4-12.7z"></path><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path></svg></i></span>
    </div>
  </div>
  <div class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-default">
    <div>
      <div class="ant-progress-outer">
        <div class="ant-progress-inner">
          <div class="ant-progress-bg" style="width: 50%; height: 8px; border-radius: 100px;"></div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`renders ./components/progress/demo/line-mini.md correctly 1`] = `
<div style="width: 170px;">
  <div class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-small">
    <div>
      <div class="ant-progress-outer">
        <div class="ant-progress-inner">
          <div class="ant-progress-bg" style="width: 30%; height: 6px; border-radius: 100px;"></div>
        </div>
      </div><span class="ant-progress-text">30%</span>
    </div>
  </div>
  <div class="ant-progress ant-progress-line ant-progress-status-active ant-progress-show-info ant-progress-small">
    <div>
      <div class="ant-progress-outer">
        <div class="ant-progress-inner">
          <div class="ant-progress-bg" style="width: 50%; height: 6px; border-radius: 100px;"></div>
        </div>
      </div><span class="ant-progress-text">50%</span>
    </div>
  </div>
  <div class="ant-progress ant-progress-line ant-progress-status-exception ant-progress-show-info ant-progress-small">
    <div>
      <div class="ant-progress-outer">
        <div class="ant-progress-inner">
          <div class="ant-progress-bg" style="width: 70%; height: 6px; border-radius: 100px;"></div>
        </div>
      </div><span class="ant-progress-text"><i class="anticon anticon-cross-circle"><!----></i></span>
    </div>
  </div>
  <div class="ant-progress ant-progress-line ant-progress-status-success ant-progress-show-info ant-progress-small">
    <div>
      <div class="ant-progress-outer">
        <div class="ant-progress-inner">
          <div class="ant-progress-bg" style="width: 100%; height: 6px; border-radius: 100px;"></div>
        </div>
      </div><span class="ant-progress-text"><i class="anticon anticon-check-circle"><svg viewBox="64 64 896 896" data-icon="check-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M699 353h-46.9c-10.2 0-19.9 4.9-25.9 13.3L469 584.3l-71.2-98.8c-6-8.3-15.6-13.3-25.9-13.3H325c-6.5 0-10.3 7.4-6.5 12.7l124.6 172.8a31.8 31.8 0 0 0 51.7 0l210.6-292c3.9-5.3.1-12.7-6.4-12.7z"></path><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path></svg></i></span>
    </div>
  </div>
</div>
`;

exports[`renders ./components/progress/demo/linecap.md correctly 1`] = `
<div>
  <div class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default">
    <div>
      <div class="ant-progress-outer">
        <div class="ant-progress-inner">
          <div class="ant-progress-bg" style="width: 75%; height: 8px; border-radius: 0;"></div>
        </div>
      </div><span class="ant-progress-text">75%</span>
    </div>
  </div>
  <div class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default">
    <div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24px;"><svg viewBox="0 0 100 100" class="ant-progress-circle">
        <path d="M 50,50 m 0,-47
       a 47,47 0 1 1 0,94
       a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #108ee9; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px;"></path>
        <path d="M 50,50 m 0,-47
       a 47,47 0 1 1 0,94
       a 47,47 0 1 1 0,-94" stroke-linecap="square" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #108ee9; stroke-dasharray: 221.48228207808043px 295.3097094374406px; stroke-dashoffset: -0px;"></path>
      </svg><span class="ant-progress-text">75%</span></div>
  </div>
  <div class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default">
    <div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24px;"><svg viewBox="0 0 100 100" class="ant-progress-circle">
        <path d="M 50,50 m 0,47
       a 47,47 0 1 1 0,-94
       a 47,47 0 1 1 0,94" stroke="#f3f3f3" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #108ee9; stroke-dasharray: 220.30970943744057px 295.3097094374406px; stroke-dashoffset: -37.5px;"></path>
        <path d="M 50,50 m 0,47
       a 47,47 0 1 1 0,-94
       a 47,47 0 1 1 0,94" stroke-linecap="square" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #108ee9; stroke-dasharray: 165.23228207808043px 295.3097094374406px; stroke-dashoffset: -37.5px;"></path>
      </svg><span class="ant-progress-text">75%</span></div>
  </div>
</div>
`;

exports[`renders ./components/progress/demo/segment.md correctly 1`] = `
<div class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default">
  <div>
    <div class="ant-progress-outer">
      <div class="ant-progress-inner">
        <div class="ant-progress-bg" style="width: 60%; height: 8px; border-radius: 100px;"></div>
        <div class="ant-progress-success-bg" style="width: 30%; height: 8px; border-radius: 100px;"></div>
      </div>
    </div><span class="ant-progress-text">60%</span>
  </div>
</div>
`;