◉ 1 views

1 line⌘Z Undo

<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<div class="rail-loader" role="status" aria-label="Loading">
  <span class="rail rail-top">
  </span>
  <span class="rail rail-bottom">
  </span>
  <span class="car car-a">
  </span>
  <span class="car car-b">
  </span>
  <span class="car car-c">
  </span>
</div>

<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<div class="rail-loader" role="status" aria-label="Loading">
  <span class="rail rail-top">
  </span>
  <span class="rail rail-bottom">
  </span>
  <span class="car car-a">
  </span>
  <span class="car car-b">
  </span>
  <span class="car car-c">
  </span>
</div>

/*
 * Author: @codepeek
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.rail-loader{position:relative;width:148px;height:92px;margin:auto;border-radius:14px;background:#080a10;box-shadow:inset 0 0 18px #000;overflow:hidden}.rail{position:absolute;left:17px;width:114px;height:18px;border:1px solid #26334a;border-radius:12px}.rail-top{top:25px}.rail-bottom{bottom:25px}.rail::after{content:"";position:absolute;inset:7px 10px;border-radius:8px;background:#172238}.car{position:absolute;z-index:2;width:21px;height:21px;border-radius:6px;background:linear-gradient(135deg,#ccfff2,#39c7da);box-shadow:0 0 11px #3be2ed;animation:rail-run 1.8s cubic-bezier(.6,0,.4,1) infinite}.car-a{animation-delay:0s}.car-b{animation-delay:.6s;background:linear-gradient(135deg,#ecdcff,#a36aff);box-shadow:0 0 11px #a36aff}.car-c{animation-delay:1.2s;background:linear-gradient(135deg,#f9ffd8,#d4eb58);box-shadow:0 0 11px #d4eb58}@keyframes rail-run{0%{left:20px;top:24px;opacity:0}8%{opacity:1}42%{left:108px;top:24px}50%{left:108px;top:47px;transform:rotate(90deg)}58%{left:108px;top:47px}92%{left:20px;top:47px}100%{left:20px;top:24px;opacity:0;transform:rotate(180deg)}}

/*
 * Author: @codepeek
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.rail-loader{position:relative;width:148px;height:92px;margin:auto;border-radius:14px;background:#080a10;box-shadow:inset 0 0 18px #000;overflow:hidden}.rail{position:absolute;left:17px;width:114px;height:18px;border:1px solid #26334a;border-radius:12px}.rail-top{top:25px}.rail-bottom{bottom:25px}.rail::after{content:"";position:absolute;inset:7px 10px;border-radius:8px;background:#172238}.car{position:absolute;z-index:2;width:21px;height:21px;border-radius:6px;background:linear-gradient(135deg,#ccfff2,#39c7da);box-shadow:0 0 11px #3be2ed;animation:rail-run 1.8s cubic-bezier(.6,0,.4,1) infinite}.car-a{animation-delay:0s}.car-b{animation-delay:.6s;background:linear-gradient(135deg,#ecdcff,#a36aff);box-shadow:0 0 11px #a36aff}.car-c{animation-delay:1.2s;background:linear-gradient(135deg,#f9ffd8,#d4eb58);box-shadow:0 0 11px #d4eb58}@keyframes rail-run{0%{left:20px;top:24px;opacity:0}8%{opacity:1}42%{left:108px;top:24px}50%{left:108px;top:47px;transform:rotate(90deg)}58%{left:108px;top:47px}92%{left:20px;top:47px}100%{left:20px;top:24px;opacity:0;transform:rotate(180deg)}}

Kinetic Rail Loader

Loaders

A dark mechanical loader where three luminous carriages travel through a compact rail system and exchange lanes in a continuous loop.

Donate to the creator

Open-source licenseMIT

Use, copy, modify, publish, distribute and sell this UI element in personal or commercial work.

Keep the original copyright and MIT notice in substantial copies. Provided “as is”, without warranty.

Read the MIT license

Used tags

#buttons #css #interface #opensource #codepeek

Community

Kinetic Rail Loader

Comments 0