Notion — мощный инструмент для организации и управления различными аспектами вашей жизни, от личных до профессиональных. Одной из особенностей, которые делают Notion таким универсальным, является возможность включения виджетов, которые можно настроить для улучшения вашего рабочего пространства. В этой статье мы рассмотрим различные методы создания стильного индикатора выполнения в виджетах Notion, используя разговорный язык и предоставив примеры кода, которые помогут вам в этом.

Метод 1: использование CSS и HTML
Чтобы создать индикатор выполнения в Notion, вы можете использовать возможности CSS и HTML. Вот простой пример:

<div class="progress-bar">
  <div class="progress"></div>
</div>
<style>
.progress-bar {
  width: 100%;
  height: 20px;
  background-color: #e0e0e0;
  border-radius: 10px;
}
.progress {
  width: 50%; /* Adjust this value to change the progress */
  height: 100%;
  background-color: #4caf50;
  border-radius: 10px;
}
</style>

Метод 2: использование JavaScript
Если вы хотите добавить интерактивность в индикатор выполнения, вы можете включить JavaScript. Вот пример, который позволяет вам динамически обновлять прогресс:

<div class="progress-bar">
  <div class="progress"></div>
</div>
<script>
const progressBar = document.querySelector('.progress');
const percent = 75; /* Adjust this value to change the progress percentage */
progressBar.style.width = `${percent}%`;
</script>

Метод 3: настройка встраивания Notion
Notion позволяет встраивать внешний контент, например веб-сайты или веб-приложения, на свои страницы. Встраивая собственный индикатор выполнения из другого источника, вы можете добиться более продвинутого и визуально привлекательного дизайна. Вот пример использования популярной библиотеки JavaScript ProgressBar.js:

<div id="progress-bar"></div>
<script src="https://cdn.jsdelivr.net/npm/progressbar.js"></script>
<script>
const progressBar = new ProgressBar.Line('#progress-bar', {
  strokeWidth: 2,
  easing: 'easeInOut',
  duration: 1400,
  color: '#4caf50', /* Adjust this value to change the progress color */
  trailColor: '#e0e0e0', /* Adjust this value to change the trail color */
  trailWidth: 2,
  svgStyle: { width: '100%', height: '100%' }
});
progressBar.animate(0.75); /* Adjust this value to change the progress percentage */
</script>

В этой статье мы рассмотрели различные методы создания стильных индикаторов выполнения в виджетах Notion. Используя CSS и HTML, вы можете создавать простые индикаторы выполнения, а включение JavaScript позволяет выполнять динамические обновления. Кроме того, вы можете использовать возможности внедрения Notion для включения расширенных индикаторов выполнения из внешних источников. С помощью этих методов вы можете настроить рабочее пространство Notion и повысить свою производительность визуально привлекательным образом.