Форум программистов, компьютерный форум, киберфорум
Наши страницы

HTML, CSS

Войти
Регистрация
Восстановить пароль
 
Alexey8888
3 / 3 / 2
Регистрация: 27.12.2016
Сообщений: 90
#1

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

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

Прогресс бар изображениями - HTML, CSS
Доброго дня. Подскажите, как сделать прогресс бар из картинок? Фон - одна картинка, полоска прогресса - другая (такого же размера), если,...

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

Как сделать нестандартный круглый бордер - HTML, CSS
Помогите пожалуйста! как сделать слитный/цельный бордер, как на картинке слева!? вот как надо и как у меня получается: &lt;body&gt; ...

Круглый Div/ Мышь реагирует в области квадрата - HTML, CSS
Здравствуйте, есть код: &lt;div class=&quot;nng&quot; style=&quot;background: url(http://invenire.ru/ru/img/animelog/index.jpg);&quot;&gt; &lt;a class=&quot;tooltip&quot;...

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

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

1
Redzep
197 / 133 / 54
Регистрация: 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
Привет! Вот еще темы с ответами:

CSS, не работает ссылка на .css документ через java script - HTML, CSS
&lt;head&gt; &lt;title&gt;Сайта&lt;/title&gt; &lt;script language=JavaScript&gt; if (screen.width &lt; '810') {document.write...

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

Как создать фон сайта с помощью CSS и где почитать про использование CSS - HTML, CSS
Как создать фон сайта с помощью CSS, приведите пример пожалуйста. И если будет не сложно подскажите где подробно можно узнать о CSS.

Css стили перебиваются css стилями от addthis.com сервиса шаринга через соц.сети - HTML, CSS
Есть ссылка: &lt;a class=&quot;addthis_button_vk&quot;&gt;&lt;div id=&quot;sb_vk_div&quot;&gt;&lt;/div&gt;&lt;/a&gt; class=&quot;addthis_button_vk&quot; отвечает за css ссылки, он...


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

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

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