[Need Help] Cursor on Loadingscreen

FiveM Resource Development & Modding Discussion
, ,
1

Hey guys I have a quick question. I am currently working on a loadingscreen and wanted to implement a few buttons in it. The problem is, when I join the server, I have no cursor. I have now looked around the forum a bit and found a few possible solutions, but none have worked properly. The loading screen is on an external webspace and there is only a meta-tag in the resource that points to it.

Thanks already for help!
~KnifyDodo

2

hello
in ui you should do this :
in js file :

var t = document.getElementById("cursor");
$( "body" ).mousemove(function( event ) {
	  t.style.left =event.pageX + "px"; 
      t.style.top = event.pageY + "px";
});

in css :

*{cursor:none}#cursor{position:fixed;z-index:9999999;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none}line,circle{stroke:url("#gradient");stroke-width:3;transform-origin:50% 50%;opacity:1}line{animation:op-1 2s ease-out infinite}circle{animation:op-1 2s ease-out 1s infinite,op-2 2s ease-out 1s infinite}
	@-moz-keyframes op-1{50%{opacity:.1;transform:rotate(7200deg)}}@-webkit-keyframes op-1{50%{opacity:.1;transform:rotate(7200deg)}}@-o-keyframes op-1{50%{opacity:.1;transform:rotate(7200deg)}}@keyframes op-1{50%{opacity:.1;transform:rotate(7200deg)}}@-moz-keyframes op-2{50%{transform:scale(.2)}}@-webkit-keyframes op-2{50%{transform:scale(.2)}}@-o-keyframes op-2{50%{transform:scale(.2)}}@keyframes op-2{50%{transform:scale(.2)}}
		.slide-website::-webkit-scrollbar {
  display: none;
}

and the end, in html file add :

<svg class="cursor" id="cursor"
       width="30"
       height="30">
    <defs>
      <linearGradient id="gradient"
                      x1="0"
                      y1="0"
                      x2="1"
                      y2="1">
        <stop offset="0%"
              stop-color="#f2c061"></stop>
        <stop offset="100%"
              stop-color="#da1b60"></stop>
      </linearGradient>
    </defs>
    <circle r="13"
            cx="15"
            cy="15"
            fill="none"></circle>
    <line x1="0"
          y1="0"
          x2="30"
          y2="30"></line>
    <line x1="0"
          y1="30"
          x2="30"
          y2="0"></line>
  </svg>
3

wtf okay i made it by myself now by just adding a image into the html:

<img src="cursor.png" class="follow">

then i added some style to the css:

.follow {
  position: absolute;
  z-index: 1000;
  height: 50px;
  pointer-events: none;
}

the last thing i did is bind the image to the cursor by javascript: (You have to add jQuery for this!!)

$(document).mousemove(function(e){
      $('.follow').css({'top': e.clientY - 0, 'left': e.clientX - 0});
});

Cheers
~KnifyDodo