Посоветуйте прогресс бар

@morda77 · Регистрация: 22.12.2012

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

Привет! Посоветуйте, плиз, бесплатный плагин или скрипт прогресс бара,, который легко стилизовать.
Спасибо.

@Fedor92 · 24.08.2018, 21:18

morda77, на борту бутстрапа есть прогрессбар...

@morda77 · 25.08.2018, 02:50 **[ТС]**

Мне надо в Worpress это на странице вывести. Мне нужно такой прогресс бар сделать. Один в один.

http://upload.dreamten.com/1e5dd1df0efb

Добавлено через 1 час 6 минут
Как поместить в такой прогресс бар отображение процента заполнения, прижатый к правому краю заполненного пространства?

HTML5

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML5 Progress Bar</title>
    <style>
        .wrapper {
            width: 60%;
            margin: 0 auto;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <h1>HTML5 progress bar</h1>
        <progress class="custom-progress" max="100" value="28">28%</progress>
    </div>
</body>
</html>

Спасибо.

@Fedor92 · 25.08.2018, 10:46

HTML5

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML5 Progress Bar</title>
    <style>
        .wrapper {
            width: 60%;
            margin: 0 auto;
            text-align: center;
        }
        
        
        .wrapper>div{
            display: inline-block;
            position:relative;
        }
        
        .wrapper>div:after{
            content: "28%";
            position:absolute;
            right:5px;
            top:1px
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <h1>HTML5 progress bar</h1>
        <div>
            <progress class="custom-progress" max="100" value="28"></progress>
        </div>
    </div>
</body>
</html>

@morda77 · 25.08.2018, 16:22 **[ТС]**

Fedor92, спасибо. Но я имел в виду прижать к правому краю заполненного пространства. Т.е, чтобы по мере заполнения цифра сдвигалась вправо вместе с заполнением. Так можно сделать?

@Fedor92 · 25.08.2018, 16:24

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

Так можно сделать?

Не думаю... Если только на js и то не факт...

@morda77 · 25.08.2018, 16:25 **[ТС]**

Fedor92, а хотя бы просто посередине расположить?

@Fedor92 · 25.08.2018, 16:35

HTML5

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML5 Progress Bar</title>
    <style>
        .wrapper {
            width: 60%;
            margin: 0 auto;
            text-align: center;
        }
        
        
        .wrapper>div{
            display: inline-block;
            position:relative;
        }
        
        .wrapper>div:after{
            content: "28%";
            position:absolute;
            right:0;
            left:0;
            top:1px
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <h1>HTML5 progress bar</h1>
        <div>
            <progress class="custom-progress" max="100" value="28"></progress>
        </div>
    </div>
</body>
</html>

@morda77 · 25.08.2018, 16:35 **[ТС]**

Ок. По центру вроде выровнял. Но вот незадача. У меня уже были в файле CSS прописаны стили дизайна для этого бара. Теперь они не работают. Можно Ваш код как-то совместить с моим кодом?

CSS

/* Progress Bar */
 
/**
 * Cross-browser/Non specific selector
 */
 
.custom-progress {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    height: 40px;
 
    /* Outer bar */
    border: none;
    border-radius: 18px;
    background-color: #303a52;
}
 
/**
 * Webkit
 */
 
/* Outer bar */
.custom-progress::-webkit-progress-bar {
    border-radius: 18px;
    background-color: #E7E7E7;
}
 
/* Inner bar */
.custom-progress::-webkit-progress-value {
    border-radius: 18px;
    background: repeating-linear-gradient(
        135deg,
        #8AD21C,
        #87CD1E 10px,
        #87CD1E 10px,
        #87CD1E 20px
    );
}
 
/**
 * Mozilla
 */
 
/* Inner bar */
 
.custom-progress::-moz-progress-bar {
    border-radius: 18px;
    background: repeating-linear-gradient(
        135deg,
        #606dbc,
        #606dbc 10px,
        #465298 10px,
        #465298 20px
    );
}
 
/**
 * IE/Edge
 */
 
 /* Inner bar */
 
.custom-progress::-ms-fill {
    border-radius: 18px;
    background: repeating-linear-gradient(
        135deg,
        #606dbc,
        #606dbc 10px,
        #465298 10px,
        #465298 20px
    );
}

Спасибо.

@Fedor92 · 25.08.2018, 16:50

HTML5

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML5 Progress Bar</title>
    <style>
        .wrapper {
            width: 60%;
            margin: 0 auto;
            text-align: center;
        }
        
        
        .wrapper>div{
            width:30%;
            display: inline-block;
            position:relative;
        }
        
        .wrapper>div:after{
            content: "28%";
            font-size:16px;
            position:absolute;
            right:0;
            left:0;
            top:50%;
            margin-top:-8px
        }
        
        /* Progress Bar */
 
/**
 * Cross-browser/Non specific selector
 */
 
.custom-progress {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    height: 40px;
 
    /* Outer bar */
    border: none;
    border-radius: 18px;
    background-color: #303a52;
}
 
/**
 * Webkit
 */
 
/* Outer bar */
.custom-progress::-webkit-progress-bar {
    border-radius: 18px;
    background-color: #E7E7E7;
}
 
/* Inner bar */
.custom-progress::-webkit-progress-value {
    border-radius: 18px;
    background: repeating-linear-gradient(
        135deg,
        #8AD21C,
        #87CD1E 10px,
        #87CD1E 10px,
        #87CD1E 20px
    );
}
 
/**
 * Mozilla
 */
 
/* Inner bar */
 
.custom-progress::-moz-progress-bar {
    border-radius: 18px;
    background: repeating-linear-gradient(
        135deg,
        #606dbc,
        #606dbc 10px,
        #465298 10px,
        #465298 20px
    );
}
 
/**
 * IE/Edge
 */
 
 /* Inner bar */
 
.custom-progress::-ms-fill {
    border-radius: 18px;
    background: repeating-linear-gradient(
        135deg,
        #606dbc,
        #606dbc 10px,
        #465298 10px,
        #465298 20px
    );
}
    </style>
</head>
<body>
    <div class="wrapper">
        <h1>HTML5 progress bar</h1>
        <div>
            <progress class="custom-progress" max="100" value="28"></progress>
        </div>
    </div>
</body>
</html>

@morda77 · 25.08.2018, 16:57 **[ТС]**

Fedor92, спасибо. Попробую.

@morda77 23 / 23 / 9 Регистрация: 22.12.2012 Сообщений: 2,513
	25.08.2018, 16:57 [ТС]	11
	Fedor92, спасибо. Попробую. 0

@morda77 23 / 23 / 9 Регистрация: 22.12.2012 Сообщений: 2,513
		1
	Посоветуйте прогресс бар 24.08.2018, 19:16. Показов 1407. Ответов 10 Метки plugin, progressbar, script, wordpres, плагин, прогрессбар, скрипт (Все метки) Привет! Посоветуйте, плиз, бесплатный плагин или скрипт прогресс бара,, который легко стилизовать. Спасибо. 0

@Fedor92 2964 / 2620 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	24.08.2018, 21:18	2
	morda77, на борту бутстрапа есть прогрессбар... 0

@morda77 23 / 23 / 9 Регистрация: 22.12.2012 Сообщений: 2,513
	25.08.2018, 16:22 [ТС]	5
	Fedor92, спасибо. Но я имел в виду прижать к правому краю заполненного пространства. Т.е, чтобы по мере заполнения цифра сдвигалась вправо вместе с заполнением. Так можно сделать? 0

@Fedor92 2964 / 2620 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	25.08.2018, 16:24	6
	Сообщение от morda77 Так можно сделать? Не думаю... Если только на js и то не факт... 0

@morda77 23 / 23 / 9 Регистрация: 22.12.2012 Сообщений: 2,513
	25.08.2018, 16:25 [ТС]	7
	Fedor92, а хотя бы просто посередине расположить? 0

Посоветуйте прогресс бар

Решение