How to create a custom progress bar with percentage

  • Von

Our built-in progress bar does not display a percentage. This guide provides instructions on creating a custom progress bar with a percentage display, allowing you to manually control the progress on individual nodes.

Step 1: Go to Appearance settings > Header and Footer > enable “Display Header” and add this code under Content Below Header.

<div class="progress-container">
  <div class="progress-bar"></div>
  <div class="progress-text"></div>
</div>

Step 2: Go to DT level scripts and add this CSS above </head> section

<style>
.progress-container {
  width: 100%;
  background-color: #f0f0f0;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  position: relative;
  height: 30px;
  margin: 20px 0;
  /* Remove any potential padding */
  padding: 0;
}

.progress-bar {
  height: 100%;
  width: var(--progress-value, 0%);
  background-image: linear-gradient(45deg,
    rgba(255, 255, 255, 0.15) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.15) 50%,
    rgba(255, 255, 255, 0.15) 75%,
    transparent 75%,
    transparent);
  background-color: #4CAF50;
  background-size: 40px 40px;
  border-radius: 10px; /* Match the container's border-radius */
  transition: width 0.5s ease;
  animation: progress-bar-stripes 1s linear infinite;
  /* Fix positioning */
  position: absolute;
  left: 0;
  top: 0;
  /* Remove any borders or outlines */
  border: none;
  outline: none;
  /* Ensure no margin */
  margin: 0;
}

@keyframes progress-bar-stripes {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 40px 0;
  }
}

.progress-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #333;
  font-weight: bold;
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5);
  z-index: 10;
  font-family: 'Courier New', monospace;
}

/* Use the content property to display the percentage text */
.progress-text::after {
  content: var(--progress-text, '0%');
}
  </style>

Step 3: In your individual node’s content, go to Source code editor and add this code:

<p>
<style type="text/css">:root {
    --progress-value: 25%; /* Change this value for each page */
    --progress-text: '25%'; /* Must match the value above */
  }
</style>
</p>

Tagged: