Как создать прогрессбар с текстовой надписью?

Для создания прогрессбара с текстовой надписью можно воспользоваться HTML, CSS и JavaScript. Вот пример структуры кода для такого элемента:

HTML:
```html
<div class="progress-bar">
  <div class="progress-bar__fill"></div>
  <span class="progress-bar__text">Загрузка...</span>
</div>
```

CSS:
```css
.progress-bar {
  position: relative;
  width: 100%;
  height: 20px;
  background-color: #f0f0f0;
  border-radius: 10px;
}

.progress-bar__fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-color: #007bff;
  border-radius: 10px;
  width: 0;
}

.progress-bar__text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #000;
}
```

JavaScript (для изменения ширины прогрессбара):
```javascript
const progressBarFill = document.querySelector('.progress-bar__fill');
const progress = 50; // Прогресс загрузки в процентах

progressBarFill.style.width = `${progress}%`;
```

Что касается элемента с подписью сверху и тенью, то оптимальная структура тегов и вложенность может выглядеть примерно так:

HTML:
```html
<div class="element-with-shadow">
  <span class="element-with-shadow__text">Текст</span>
</div>
```

CSS:
```css
.element-with-shadow {
  position: relative;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.element-with-shadow__text {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background-color: #fff;
}
```

Это лишь примеры структур кода, которые можно доработать и адаптировать под свои нужды.