mirror of
https://github.com/penpot/penpot.git
synced 2025-01-10 17:00:36 -05:00
add loader code
This commit is contained in:
elhombretecla
Andrey Antukh
parent
697020c385
commit
070b8a8378
5 changed files with 113 additions and 0 deletions
|
|
@ -3286,3 +3286,55 @@
|
|||
-webkit-animation-name: slideOutUp;
|
||||
animation-name: slideOutUp;
|
||||
}
|
||||
|
||||
// Loader animation
|
||||
@keyframes pen1 {
|
||||
0% {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
15% {
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
30% {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pen2 {
|
||||
30% {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
45% {
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
60% {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pen3 {
|
||||
60% {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
75% {
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
90% {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes loaderColor {
|
||||
0% {
|
||||
fill: #513B56;
|
||||
}
|
||||
33% {
|
||||
fill: #348AA7;
|
||||
}
|
||||
66% {
|
||||
fill: #5DD39E;
|
||||
}
|
||||
100% {
|
||||
fill: #513B56;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -52,6 +52,7 @@
|
|||
@import 'partials/color-palette';
|
||||
@import 'partials/colorpicker';
|
||||
@import 'partials/forms';
|
||||
@import 'partials/loader';
|
||||
|
||||
//#################################################
|
||||
// Resources
|
||||
|
|
|
|||
32
resources/styles/partials/loader.scss
Normal file
32
resources/styles/partials/loader.scss
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
// full width BG
|
||||
.loader-content {
|
||||
align-items: center;
|
||||
background-color: rgba(255,255,255, .85);
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
justify-content: center;
|
||||
left: 0;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
// Loader CSS
|
||||
svg#loader-icon {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
animation: loaderColor 5s infinite ease;
|
||||
}
|
||||
|
||||
#loader-pen1 {
|
||||
animation: pen1 2s infinite ease;
|
||||
}
|
||||
|
||||
#loader-pen2 {
|
||||
animation: pen2 2s infinite ease;
|
||||
}
|
||||
|
||||
#loader-pen3 {
|
||||
animation: pen3 2s infinite ease;
|
||||
}
|
||||
|
|
@ -198,6 +198,9 @@
|
|||
(udl/open! :new-project))]
|
||||
(html
|
||||
[:section.dashboard-grid
|
||||
;; LOADER WIP
|
||||
[:div.loader-content i/loader]
|
||||
;; LOADER WIP
|
||||
[:h2 "Your projects"]
|
||||
[:div.dashboard-grid-content
|
||||
[:div.grid-item.add-project
|
||||
|
|
|
|||
|
|
@ -626,3 +626,28 @@
|
|||
[:path
|
||||
{:d
|
||||
"M325.318.012c-21.828-.283-42.138 15.34-48.74 35.798-15.498 31.788-36.62 62.656-67.738 80.85-46.02 26.248-99.73 35.59-152.188 35.65-11.824-.026-24.336 1.564-34 9.065-18.02 12.488-27.52 36.96-20.133 58.034 4.15 13.85 14.838 24.125 25.197 33.582l86.5 86.5C84.488 381.137 30.993 456.543 1.26 498.187c41.623-29.727 117.01-83.215 158.632-112.942 37.542 36.62 68.373 70.025 106.956 105.56 23.195 15.987 59.377 8.335 73.035-16.723 7.6-12.733 8.225-27.804 7.5-42.23 1.366-50.12 11.25-101.404 37.675-144.67 20.658-31.714 53.59-52.978 87.635-68.023 20.972-10.427 31.76-36.413 25.57-58.77-2.664-11.118-9.64-20.31-17.897-27.873-37.25-36.595-73.2-74.495-110.7-110.84-7.227-6.593-13.718-14.767-23.268-17.904-6.682-2.644-13.898-3.908-21.08-3.758zm-.26 36.837c45.35 46.82 90.704 93.64 136.056 140.46-40.437 18.15-79.907 42.182-106.303 78.613-30.216 43.44-43.98 96.178-48.765 148.346-1.852 21.542-2.097 43.256-1.726 64.933-91.546-91.52-183.09-183.044-274.634-274.564 60.078 2.462 121.696-4.117 176.98-28.967 38.773-15.762 70.437-46.032 91.712-81.66 9.637-15.522 17.813-31.905 25.36-48.525z"}]]]))
|
||||
|
||||
(def loader
|
||||
(html
|
||||
[:svg
|
||||
{:viewBox "0 -10 261 355"
|
||||
:height "279"
|
||||
:width "369"
|
||||
:id "loader-icon"}
|
||||
[:g
|
||||
[:path
|
||||
{:id "loader-body"
|
||||
:d
|
||||
"M230.023 80.02l-.023.03v15.044l-11.96.006v20.75l-19.354 9.142V95.107l-9.93-.04v34.6l-19.417 9.254-.003-43.777-14.146-.016v50.414l-19.354 9.146.002-59.55-9.93.027v59.434l-19.508-9.212V95.15l-13.774-.13-.002 43.766-19.332-9.053V95.12l-9.97.045v29.893l-19.398-9.187V95.177l-11.983.006v15.03l-17.122-8.09 17.078-6.983V80.22L.286 95.257 0 95.12v188.953l123.418 58.308 7.543 3.56 7.542-3.56 123.42-58.306V95.12l-.233.11-31.667-15.06zm-.002 15.076l17.126 7.002-17.125 8.09zM15.083 118.93l108.336 51.177v155.59L15.082 274.52zm231.756 0v155.59l-108.336 51.177v-155.59z"}]
|
||||
[:path
|
||||
{:id "loader-pen1"
|
||||
:d
|
||||
"M68.26.058L31.934 51.22l.002 58.06H43.9V59.536h19.423v49.742h9.97V59.536H92.62v49.742h11.967V51.22l-1.105-1.554L68.262.058zm6.43 29.72l14.047 19.788H47.784L61.67 30.01l13.02-.23z"}]
|
||||
[:path
|
||||
{:id "loader-pen2"
|
||||
:d
|
||||
"M130.808 13.936L94.48 65.098l.002 58.058h11.964V73.414h19.424v49.742h9.97V73.414h19.327v49.742h11.967V65.098l-1.105-1.555-35.222-49.607zm6.427 29.72l14.05 19.787H110.33l13.886-19.556 13.02-.23z"}]
|
||||
[:path
|
||||
{:id "loader-pen3"
|
||||
:d
|
||||
"M193.684.083l-36.328 51.162.002 58.058h11.965V59.56h19.424v49.743h9.97V59.56h19.326v49.743h11.967V51.245l-1.105-1.555L193.685.083zm6.428 29.72l14.05 19.787h-40.955l13.885-19.556 13.02-.23z"}]]]))
|
||||
|
|
|
|||
Loading…
Reference in a new issue