Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Alexey8888
4 / 4 / 3
Регистрация: 27.12.2016
Сообщений: 90
#1

Круглый прогресс бар на css - HTML, CSS

25.03.2017, 15:20. Просмотров 1563. Ответов 1

Здравствуйте. Помогите пожалуйста разобраться с тем, как увеличить или уменьшить красную линию,при том, чтоб начало ее шло с верху, никак не могу разобраться...
HTML5
1
2
3
4
<div class="block html-progress">
<h2>75 %</h2>
<p>HTML</p>
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.html-progress, .css-progress
  width: 170px
  height: 170px
  margin: 35px 0 30px 0
  background: transporant
  border: 10px solid $accent
  border-radius: 100%
  border-top: 10px solid #B3B3B3
  transform: rotate(-45deg)
  p, h2
    text-align: center
    transform: rotate(45deg)
    margin: 0
  p 
    font-size: 20px
    padding: 10px 50px 10px 0
  h2
    padding: 30px 0 0 50px

http://www.cyberforum.ru/html/thread1201814.html

0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
25.03.2017, 15:20
Я подобрал для вас темы с готовыми решениями и ответами на вопрос Круглый прогресс бар на css (HTML, CSS):

Как создать прогресс-бар для скрипта?
Здравствуйте! У меня имеется php скрипт, который обрабатывает изображения,...

Как сделать нестандартный круглый бордер
Помогите пожалуйста! как сделать слитный/цельный бордер, как на картинке...

Круглый Div/ Мышь реагирует в области квадрата
Здравствуйте, есть код: &lt;div class=&quot;nng&quot; style=&quot;background:...

Разместить круглый элемент на левой границе родительского элемента
Еще раз всем привет! Теперь у меня (неожиданно для меня) возникла следующая...

Не активен скрол бар
Привет всем. Почему на сайте не реклама не активен скрол бар при уменьшении...

1
Redzep
197 / 133 / 88
Регистрация: 21.12.2014
Сообщений: 369
25.03.2017, 22:23 #2
Набросал по-быстрому, меняй переменную $progress от 0 до 360.
https://jsfiddle.net/vr91wkgn/
HTML5
1
2
3
<div class="progress">
  <div class="center"></div>
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
$diameter: 200px;
$accent: red;
$gray: gray;
$progress: 270; // Угол
$border: 10px;
.progress {
  position: relative;
  width: $diameter;
  height: $diameter;
  border-radius: 50%;
  background-color: $accent;
  &::before {
    position: absolute;
    content: '';
    @if $progress > 180 {
      background-color: $accent;
    }
    @if $progress <= 180 {
      background-color: $gray;
    }
    width: $diameter;
    height: $diameter;
    border-radius: 50%;
    clip: rect(0, #{$diameter/2}, $diameter, 0);
    transform-origin: 50% 50%;
    @if $progress <= 180 {
      transform: rotate(#{180 + $progress}deg);
    }
    @if $progress > 180 {
      transform: rotate(#{180 + $progress - 180}deg);
    }
    z-index: 1;
  }
  &::after {
    position: absolute;
    content: '';
    background-color: $gray;
    width: $diameter;
    height: $diameter;
    border-radius: 50%;
    clip: rect(0, #{$diameter/2}, $diameter, 0);
    transform-origin: 50% 50%;
    transform: rotate(0deg);
  }
  .center {
    position: absolute;
    top: $border;
    left: $border;
    width: #{$diameter - 2 * $border};
    height: #{$diameter - 2 * $border};
    background-color: white;
    border-radius: 50%;
    z-index: 2;
  }
}
 
body {
  background-color: white;
}
1
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
25.03.2017, 22:23
Привет! Вот еще темы с решениями:

Gulp критичный css, инструмент для генерации критичного css
Пытаюсь закрыть последний пункт в googlespeed: &quot;Удалите код JavaScript и CSS,...

CSS, не работает ссылка на .css документ через java script
&lt;head&gt; &lt;title&gt;Сайта&lt;/title&gt; &lt;script language=JavaScript&gt; ...

Плагин для css с возможностью создания переменных в css файле
Один раз наткнулся в интернете на интересный плагин для css, похожий на jquery...

Как сделать вот такой макет через html и css (div и css)
Доброго времени суток.Подскажите как сделать по скрину ?* что бы было Лого на...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
2
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru