Анимация прогресс бара средствами CSS3

@grisha2217 · Регистрация: 13.08.2013

Студворк — интернет-сервис помощи студентам

Всем привет.
Увидел эту статейку на буржуйском сайте, захотелось поставить себе (вместе с анимацией), но анимация почему-то не работает и я так и не смог выяснить причину, просьба помочь.

На этой страничке есть прогресс бар (под аватаркой).

CSS .reputation_progress:

CSS
1
2
3
4
5
6
7
background: linear-gradient(135deg,rgba(255, 255, 255, 0.15) 25%,rgba(0, 0, 0, 0) 25%,rgba(0, 0, 0, 0) 50%,rgba(255, 255, 255, 0.15) 50%,rgba(255, 255, 255, 0.15) 75%,rgba(0, 0, 0, 0) 75%,rgba(0, 0, 0, 0));
[COLOR="Red"]-webkit-animation: animate-stripes 3s linear infinite;[/COLOR]
padding: 4.5px 0 6px 1px;
margin-top: -2.5px;
text-align: center;
background-color: #348F7E;
font: 10px Tahoma;

-webkit-animation: animate-stripes 3s linear infinite;
Этот кусок брал с другого сайта и там анимация тоже работала,а уменя нет. Также прошу объяснить мне, зачем нужен иденфикатор infinite или forwards

@grisha2217 · 28.01.2015, 15:20 **[ТС]**

Вверх, проблема не решена

@grisha2217 · 31.01.2015, 15:49 **[ТС]**

Ап.

@cellse · 01.02.2015, 22:14

infinite - повторяется бесконечно
forwards - сохраняет состояние после проигрыша анимации

Добавлено через 7 минут
и кстати там гифка стоит фоном, которая и даёт движение светлых полос

@grisha2217 · 02.02.2015, 13:36 **[ТС]**

Сообщение от cellse

infinite - повторяется бесконечно
forwards - сохраняет состояние после проигрыша анимации
Добавлено через 7 минут
и кстати там гифка стоит фоном, которая и даёт движение светлых полос

Ой, не ту ссылку дал.
Клик
Вот здесь вроде как нет фона из гифки.

@cellse · 02.02.2015, 23:17

У меня всё работает. Вы ширину span'y не забыли поставить ?

@grisha2217 · 04.02.2015, 21:03 **[ТС]**

Сообщение от cellse

У меня всё работает. Вы ширину span'y не забыли поставить ?

Будет проще, если вы подскажите мне, что дописать в CSS на этой странице, чтобы анимация заработала

@cellse · 05.02.2015, 10:51

grisha2217, Я за вас писать не хочу)) Вместо картинки сверстайте маленький прогресс бар, что там сложного то? Картинку убираем, прогресс бар добавляем, копипаст + немного ручками подправить

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	Установка Emscripten SDK (emsdk) и CMake на Windows для сборки C и C++ приложений в WebAssembly (Wasm) 8Observer8 30.01.2026 Чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. Система контроля версиями Git. . .	Подключение Box2D v3 к SDL3 для Android: физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .

@grisha2217 21 / 21 / 10 Регистрация: 13.08.2013 Сообщений: 295
	28.01.2015, 15:20 [ТС]
	Вверх, проблема не решена 0

@grisha2217 21 / 21 / 10 Регистрация: 13.08.2013 Сообщений: 295
	31.01.2015, 15:49 [ТС]
	Ап. 0

@cellse 70 / 68 / 22 Регистрация: 12.08.2013 Сообщений: 297
	01.02.2015, 22:14
	infinite - повторяется бесконечно forwards - сохраняет состояние после проигрыша анимации Добавлено через 7 минут и кстати там гифка стоит фоном, которая и даёт движение светлых полос 1

@cellse 70 / 68 / 22 Регистрация: 12.08.2013 Сообщений: 297
	02.02.2015, 23:17
	У меня всё работает. Вы ширину span'y не забыли поставить ? 0

@cellse 70 / 68 / 22 Регистрация: 12.08.2013 Сообщений: 297
	05.02.2015, 10:51
	grisha2217, Я за вас писать не хочу)) Вместо картинки сверстайте маленький прогресс бар, что там сложного то? Картинку убираем, прогресс бар добавляем, копипаст + немного ручками подправить 0