4

Ребята, хотелось бы себе прелоадер в виде спидометра. Сам прелоадер уже готов, нужен только спидометр в силистике аля Mercedes-benz. Примерно такой как на фото

введите сюда описание изображения

Я не говорю скопировать его один в один, а чтоб было что-либо похожее. Заранее благодарю.

2
  • 3
    Что Вы сделали? Хотите чтобы за Вас всё сделали?
    – user207618
    Commented 5 сент. 2017 в 11:09
  • 1
    Не совсем то, но возможно поможет. codepen.io/Muzyka/pen/evPjGa Commented 5 сент. 2017 в 11:09

1 ответ 1

13

Пользуйся)

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family:tahoma;
  user-select:none;
  cursor: default;
}
body{
  background-color:#000;
  perspective: 2500px;
  position: relative;
}
.container{
  width:640px;
  height:480px;
  margin: 50px auto;
  overflow:hidden;
  background-color:#000;
  position:relative;
}
.speedometr{
  width: 550px;
  height: 550px;
  border: solid 4px #E86519;
  border-radius: 50%;
  margin: 50px auto;
  position:relative;
  animation-name: speedo;
  animation-duration: 4s;
}
.black{
  width:100%;
  height:95px;
  background:#000;
  position:absolute;
  bottom:-5px;
  left:0px;
}
.ris-w{
  position:absolute;
  width:35px;
  height:8px;
  background-color:#fff;
  animation-name: ris-w;
  animation-duration: 2.5s;
}
.ris-w:nth-child(1){
  top:310px;
  left:10px;
  transform: rotate(-13deg);
  animation-delay: 0s;
}
.ris-w:nth-child(2){
  top: 230px;
  left:9px;
  transform: rotate(10deg);
  animation-delay: .1s;
}
.ris-w:nth-child(3){
  top: 230px;
  right:9px;
  transform: rotate(-10deg);
  animation-delay: 1.0s;
}
.ris-w:nth-child(4){
  top: 155px;
  left:34px;
  transform: rotate(29deg);
  animation-delay: .2s;
}
.ris-w:nth-child(5){
  top: 155px;
  right:34px;
  transform: rotate(-29deg);
  animation-delay: .9s;
}
.ris-w:nth-child(6){
  top: 90px;
  left:82px;
  transform: rotate(45deg);
  animation-delay: .3s;
}
.ris-w:nth-child(7){
  top: 90px;
  right:82px;
  transform: rotate(-45deg);
  animation-delay: .8s;
}
.ris-w:nth-child(8){
  top: 42px;
  left:151px;
  transform: rotate(63deg);
  animation-delay: .4s;
}
.ris-w:nth-child(9){
  top: 42px;
  right:151px;
  transform: rotate(-63deg);
  animation-delay: .7s;
}
.ris-w:nth-child(10){
  top: 20px;
  left:254px;
  transform: rotate(90deg);
  animation-delay: .5s;
}
.ris-w:nth-child(11){
  top:310px;
  right:10px;
  transform: rotate(13deg);
  animation-delay: 1.1s;
}
.ris{
  width: 16px;
  height: 4px;
  background-color: #E86519;
  position: absolute;
  animation-name: ris;
  animation-duration: 4s;
}
.ris-o1{
  top: 275px;
  left: 5px;
  transform: rotate(-6deg);
}
.ris-o2{
  top: 275px;
  right: 5px;
  transform: rotate(6deg);
}
.ris-o3{
  top: 190px;
  left: 17px;
  transform: rotate(17deg);
}
.ris-o4{
  top: 190px;
  right: 17px;
  transform: rotate(-17deg);
}
.ris-o5{
  top: 115px;
  left: 56px;
  transform: rotate(40deg);
}
.ris-o6{
  top: 115px;
  right: 56px;
  transform: rotate(-40deg);
}
.ris-o7{
  top: 55px;
  left: 118px;
  transform: rotate(54deg);
}
.ris-o8{
  top: 55px;
  right: 118px;
  transform: rotate(-54deg);
}
.ris-o9{
  top: 17px;
  left: 208px;
  transform: rotate(75deg);
}
.ris-o10{
  top: 17px;
  right: 208px;
  transform: rotate(-75deg);
}
span{
  color:#fff;
  font-size: 35px;
  display: block;
  position: absolute;
  animation-name: speed;
  animation-duration: 5.8s;
}
span.s-0{
  top: 280px;
  left: 57px;
}
span.s-20{
  top: 215px;
  left: 55px;
}
span.s-40{
  top: 157px;
  left: 73px;
}
span.s-60{
  top: 105px;
  left: 112px;
}
span.s-80{
  top: 64px;
  left: 165px;
}
span.s-100{
  top: 42px;
  left: 241px;
}
span.s-120{
  top: 64px;
  right: 165px;
}
span.s-140{
  top: 105px;
  right: 112px;
}
span.s-160{
  top: 157px;
  right: 73px;
}
span.s-180{
  top: 215px;
  right: 55px;
}
span.s-200{
  top: 280px;
  right: 57px;
}
.strelka{
  width: 250px;
  height: 8px;
  background-color: #FFA429;
  border-radius: 50% 5px 5px 50%;
  position: absolute;
  left: 22px;
  top: calc(50% - 8px / 2);
  transform: rotate(-10deg);
  transform-origin: 100%;
  animation-name: strelka;
  transition:.6s;
  animation-duration: 9s;
}
@keyframes speedo{
  0%{
    opacity: 0;
  }
  30%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}
@keyframes ris-w{
  0%{
    opacity: 0;
  }
  50%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}
@keyframes ris{
  0%{
    opacity: 0;
  }
  60%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}
@keyframes speed{
  0%{
    opacity: 0;
  }
  50%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}
@keyframes strelka{
  0%{
    opacity: 0;
  }
  45%{
    opacity: 0;
  }
  60%{
    opacity: 1;
  }
  61%{
    transform: rotate(-10deg);
  }
  80%{
    transform: rotate(190deg);
  }
  100%{
    transform: rotate(-10deg);
  }
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=0.4">
  <title>Спидометр</title>
</head>
<body>
  <div class="container">
    <div class="speedometr">
      <div class="ris-w"></div>
      <div class="ris-w"></div>
      <div class="ris-w"></div>
      <div class="ris-w"></div>
      <div class="ris-w"></div>
      <div class="ris-w"></div>
      <div class="ris-w"></div>
      <div class="ris-w"></div>
      <div class="ris-w"></div>
      <div class="ris-w"></div>
      <div class="ris-w"></div>
      
      <div class="ris ris-o1"></div>
      <div class="ris ris-o2"></div>
      <div class="ris ris-o3"></div>
      <div class="ris ris-o4"></div>
      <div class="ris ris-o5"></div>
      <div class="ris ris-o6"></div>
      <div class="ris ris-o7"></div>
      <div class="ris ris-o8"></div>
      <div class="ris ris-o9"></div>
      <div class="ris ris-o10"></div>

      <span class="s-0">0</span>
      <span class="s-20">20</span>
      <span class="s-40">40</span>
      <span class="s-60">60</span>
      <span class="s-80">80</span>
      <span class="s-100">100</span>
      <span class="s-120">120</span>
      <span class="s-140">140</span>
      <span class="s-160">160</span>
      <span class="s-180">180</span>
      <span class="s-200">200</span>

      <div class="strelka"></div>
    </div>
    <div class="black"></div>
  </div>
</body>
</html>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.