Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
CSS cursor property helper
.cursor.auto {
cursor: auto !important;
}
.cursor.crosshair {
cursor: crosshair !important;
}
.cursor.default {
cursor: default !important;
}
.cursor.e-resize {
cursor: e-resize !important;
}
.cursor.help {
cursor: help !important;
}
.cursor.move {
cursor: move !important;
}
.cursor.n-resize {
cursor: n-resize !important;
}
.cursor.ne-resize {
cursor: ne-resize !important;
}
.cursor.nw-resize {
cursor: nw-resize !important;
}
.cursor.pointer {
cursor: pointer !important;
}
.cursor.progress {
cursor: progress !important;
}
.cursor.s-resize {
cursor: s-resize !important;
}
.cursor.se-resize {
cursor: se-resize !important;
}
.cursor.sw-resize {
cursor: sw-resize !important;
}
.cursor.text {
cursor: text !important;
}
.cursor.w-resize {
cursor: w-resize !important;
}
.cursor.wait {
cursor: wait !important;
}
.cursor.inherit {
cursor: inherit !important;
}
// Cursors
// =======
$cursor: (
auto,
crosshair,
default,
e-resize,
help,
move,
n-resize,
ne-resize,
nw-resize,
pointer,
progress,
s-resize,
se-resize,
sw-resize,
text,
w-resize,
wait,
inherit
);
@each $i in $cursor {
.cursor.#{nth($i, 1)} {
cursor: nth($i, 1) !important;
}
}

Usage

<p class="cursor progress">Loading!!!</p>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.