jQuery Plugins › jQuery Other Plugins › Neumorphism UI

Elegant Neumorphism UI Kit With Theme Switcher

File Size: 12.8 KB
Views Total: 809
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Demo Download

More in this category...

View Recommended Plugins

TOP jQuery Plugins For 2024

Chrome, IE10+, FireFox, Opera, Safari#Neumorphic#Neumorphism
Elegant Neumorphism UI Kit With Theme Switcher

A modern, customizable, themeable, Neumorphic-style UI Kit built on top of JavaScript (jQuery), CSS/CSS3, and Ionicons/Material/FontAwesome icons.

UI Components Included:

  • Clock
  • Switch
  • Checkbox
  • Radio Button
  • Action Button
  • Input Field
  • Audio Play Button
  • Progress Bar
  • Tab Navigation
  • Circle Button
  • Theme Switcher
  • And much more

Light Theme:

Elegant Neumorphism UI Kit Light Theme

Dark Theme:

Elegant Neumorphism UI Kit Dark Theme

More About Neumorphism Design:

How to use it:

1. Load the necessary icon sets in the document. Note that these are OPTIONAL and you can use other iconic font by overriding the icon classes as shown below.

<!-- Material Icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Material Icons -->
<script src="https://kit.fontawesome.com/f0601b0fb2.js" crossorigin="anonymous"></script>
<!-- Ionicons Icons -->
<script src="https://unpkg.com/ionicons/dist/ionicons/ionicons.js"></script>

2. Load a theme CSS of your choice in the document.

<!-- White Theme -->
<link rel="stylesheet" href="css/CSS_White.css" />
<!-- Dark Theme -->
<link rel="stylesheet" href="css/CSS_DARK.css" />
<!-- DS Theme -->
<link rel="stylesheet" href="css/CSS_DS.css" />

3. Add UI components to the page.

<div class="container">
  <div class="components">
    <div class="switch">
      <div class="switch__1">
        <input id="switch-1" type="checkbox">
        <label for="switch-1"></label>
      </div>
      <div class="switch__2">
        <input id="switch-2" type="checkbox" checked>
        <label for="switch-2"></label>
      </div>
    </div>
    <div class="checkbox">
      <div class="checkbox__1">
        <input id="checkbox-1" type="checkbox">
        <label for="checkbox-1">
          <i class="material-icons">done</i></label>
      </div>
      <div class="checkbox__2">
        <input id="checkbox-2" type="checkbox" checked>
        <label for="checkbox-2">
          <i class="material-icons">done</i></label>
      </div>
    </div>
    <div class="radio">
      <div class="radio__1">
        <input id="radio-1" type="radio"  name="radio" value="1">
        <label for="radio-1"></label>
      </div>
      <div class="radio__2">
        <input id="radio-2" type="radio" name="radio" value="2" checked>
        <label for="radio-2"></label>
      </div>
    </div>
    <div class="btn btn__primary"><p>Button</p></div>
    <div class="btn btn__secondary"><p>Button</p></div>
    <div class="clock">
      <div class="hand hours"></div>
      <div class="hand minutes"></div>
      <div class="hand seconds"></div>
      <div class="point"></div>
      <div class="marker">
        <span class="marker__1"></span>
        <span class="marker__2"></span>
        <span class="marker__3"></span>
        <span class="marker__4"></span>
      </div>
    </div>
    <div class="chip">
      <div class="chip__icon">
        <ion-icon name="color-palette"></ion-icon></div>
      <p>Neumorphism Element</p>
      <div class="chip__close">
        <ion-icon name="close"></ion-icon>
      </div>
    </div>
    <div class="circle">
      <span class="circle__btn">
        <ion-icon class="pause" name="pause"></ion-icon>
        <ion-icon class="play" name="play"></ion-icon>
      </span>
      <span class="circle__back-1"></span>
      <span class="circle__back-2"></span>
    </div>
    <div class="form">
      <input type="text" class="form__input" placeholder="Type anything...">
    </div>
    <div class="search">
      <input type="text" class="search__input" placeholder="Search...">
      <div class="search__icon">
        <ion-icon name="search"></ion-icon>
      </div>
    </div>
    <div class="segmented-control">
      <input type="radio" name="radio2" value="3" id="tab-1" checked/>
      <label for="tab-1" class= "segmented-control__1">
        <p>Tab 1</p></label>

      <input type="radio" name="radio2" value="4" id="tab-2" />
      <label for="tab-2" class= "segmented-control__2">
        <p>Tab 2</p></label>

      <input type="radio" name="radio2" value="5" id="tab-3" />
      <label for="tab-3" class= "segmented-control__3">
        <p>Tab 3</p></label>
      <div class="segmented-control__color"></div>
    </div>
    <div class="icon">
      <div class="icon__home">
        <ion-icon name="home"></ion-icon></div>
      <div class="icon__account">
        <ion-icon name="person"></ion-icon></div>
      <div class="icon__settings">
        <ion-icon name="settings"></ion-icon></div>
    </div>
    <div class="slider">
      <div class="slider__box">
        <span class="slider__btn" id="find"></span>
        <span class="slider__color"></span>
        <span class="slider__tooltip">50%</span>
      </div>
    </div>
  </div>
</div>

4. The main JavaScript to enable the Clock, Range Slider, and Play Button components.

/*  clock */
const hours = document.querySelector('.hours');
const minutes = document.querySelector('.minutes');
const seconds = document.querySelector('.seconds');

/*  play button */
const play = document.querySelector('.play');
const pause = document.querySelector('.pause');
const playBtn = document.querySelector('.circle__btn');
const wave1 = document.querySelector('.circle__back-1');
const wave2 = document.querySelector('.circle__back-2');

/*  rate slider */
const container = document.querySelector('.slider__box');
const btn = document.querySelector('.slider__btn');
const color = document.querySelector('.slider__color');
const tooltip = document.querySelector('.slider__tooltip');

clock = () => {
  let today = new Date();
  let h = (today.getHours() % 12) + today.getMinutes() / 59; // 22 % 12 = 10pm
  let m = today.getMinutes(); // 0 - 59
  let s = today.getSeconds(); // 0 - 59

  h *= 30; // 12 * 30 = 360deg
  m *= 6;
  s *= 6; // 60 * 6 = 360deg

  rotation(hours, h);
  rotation(minutes, m);
  rotation(seconds, s);

  // call every second
  setTimeout(clock, 500);
}

rotation = (target, val) => {
  target.style.transform =  `rotate(${val}deg)`;
}

window.onload = clock();

dragElement = (target, btn) => {
  target.addEventListener('mousedown', (e) => {
      onMouseMove(e);
      window.addEventListener('mousemove', onMouseMove);
      window.addEventListener('mouseup', onMouseUp);
  });

  onMouseMove = (e) => {
      e.preventDefault();
      let targetRect = target.getBoundingClientRect();
      let x = e.pageX - targetRect.left + 10;
      if (x > targetRect.width) { x = targetRect.width};
      if (x < 0){ x = 0};
      btn.x = x - 10;
      btn.style.left = btn.x + 'px';

      // get the position of the button inside the container (%)
      let percentPosition = (btn.x + 10) / targetRect.width * 100;
      
      // color width = position of button (%)
      color.style.width = percentPosition + "%";

      // move the tooltip when button moves, and show the tooltip
      tooltip.style.left = btn.x - 5 + 'px';
      tooltip.style.opacity = 1;

      // show the percentage in the tooltip
      tooltip.textContent = Math.round(percentPosition) + '%';
  };

  onMouseUp  = (e) => {
      window.removeEventListener('mousemove', onMouseMove);
      tooltip.style.opacity = 0;

      btn.addEventListener('mouseover', function() {
        tooltip.style.opacity = 1;
      });
      
      btn.addEventListener('mouseout', function() {
        tooltip.style.opacity = 0;
      });
  };
};

dragElement(container, btn);

/*  play button  */
playBtn.addEventListener('click', function(e) {
  e.preventDefault();
  pause.classList.toggle('visibility');
  play.classList.toggle('visibility');
  playBtn.classList.toggle('shadow');
  wave1.classList.toggle('paused');
  wave2.classList.toggle('paused');
});

5. Insert a theme switcher into the page. Requires jQuery library.

<section class="colorRang">
  <div class="colorPicker  text-center">
    <i class="fa fa-cog fa-spin color"></i>
  </div>
  <!-- colorPicker -->
  <div class="colors text-center">
    <span class="blueCB"></span>
    <span class="lightRedCB"></span>
    <span class="orangCB"></span>
  </div>
</section>

.colorRang {
  width: auto;
  height: auto;
  position: fixed;
  top: 150px;
  left: 0;
  z-index: 1000;
}
.colorPicker {
  /** z-index: 11111;***/
  margin-left: 0px;
  position: fixed;
  left: 0;
  top: 210px;
  border-left: 0;
  font-size: 18px;
  display: block;
  -webkit-border-bottom-right-radius: 3px;
  -webkit-border-top-right-radius: 4px;
  -moz-border-radius-bottomright: 3px;
  -moz-border-radius-topright: 4px;
  border-bottom-right-radius: 3px;
  border-top-right-radius: 4px;
  padding: 10px 16px 10px 14px;
  cursor: pointer;
  top: 100px;
}

.colorPicker i {
  font-size: 30px;
}

.colors {
  width: auto;
  height: auto;
  padding: 15px 10px;
  margin-top: 7px;
  display: none;
  border-bottom-right-radius: 3px;
  border-top-right-radius: 4px;
  background: #e4ebf5;
  box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white);
}

.colors span {
  display: block;
  width: 40px;
  height: 40px;
  display: inline-block;
  cursor: pointer;
  border-radius: 20px;
}

.blueCB { background: #6d5dfc }
.lightRedCB { background:#ff0047 }
.orangCB { background: #00fff1 }

// requires jQuery library

$('.colorPicker').click(function(){
  $('.colors').slideToggle(300);
});

$(".blueCB").click(function(){
  var element = document.createElement("link");
  element.setAttribute("rel", "stylesheet");
  element.setAttribute("type", "text/css");
  element.setAttribute("href", "css/CSS_White.css");
  document.getElementsByTagName("head")[0].appendChild(element);
});

$(".lightRedCB").click(function(){
  var element = document.createElement("link");
  element.setAttribute("rel", "stylesheet");
  element.setAttribute("type", "text/css");
  element.setAttribute("href", "css/CSS_DARK.css");
  document.getElementsByTagName("head")[0].appendChild(element);
});

$(".orangCB").click(function(){
  var element = document.createElement("link");
  element.setAttribute("rel", "stylesheet");
  element.setAttribute("type", "text/css");
  element.setAttribute("href", "css/CSS_DS.css");
  document.getElementsByTagName("head")[0].appendChild(element);
});

This awesome jQuery plugin is developed by BibhushanKarki. For more Advanced Usages, please check the demo page or visit the official website.